Diskuze: Pixelová velikost uloženého obrázku obrázku

JavaScript JavaScript Pixelová velikost uloženého obrázku obrázku

Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Ahoj, existuje nějaká možnost jak pomocí JS (nebo jinak) zjistit skutečnou pixelovou velikost obrázku, který ovšem není v DOM ale pouze uložený na serveru?
Díky

 
Odpovědět 18. ledna 9:40
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Maxy_obr
Taskkill:

Ahoj, pokud to chceš pomocí js máš jen dvě možnosti

  1. Načíst ho do DOMu - jednoduše si vytvoř element, pak node, vlož element (img) do nodu, nastav mu neviditelnost (aby ti neboril rozvržení) a pak ho (ten node) appendni třeba body ... Zmer javascriptem velikost a smaz ho ... To je trochu fuška na obyčejný změření velikosti.
  2. Napiš si na serveru script, nebo udělej api a pak pouzij AJAX jednoduše zavoláš getem script, zeptas se ho na rozměry, server ti obrázek načte, změří, velikost vrátí, všechno čistý a rychlý.

V obou případech musíš znát adresu obrázku, to ale asi nebude problém.

Když budeš chtít jednu z možností víc podrobně probrat, napiš.

Editováno 18. ledna 11:21
 
Nahoru Odpovědět  -1 18. ledna 11:21
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Díky, tak nějak jsem předpokládal, že se to půjde jak píšeš v 1. možnosti. Samozřejmě mi teď do toho něco vlezlo. Takže se tomu budu věnovat asi až příští týden.

 
Nahoru Odpovědět 20. ledna 11:18
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Maxy_obr
1Pupik1989:

Úplně jednoduše jí zjistíš po načtení obrázku. Vůbec ho do DOMu nemusíš připojovat.

function getImageSize(src,callback){
  var img = new Image();

  img.onload = function(){
    callback(this.width,this.height);
  };

  img.src = src;
};

getImageSize('foto.jpg',function(width,height){
  console.log('Šiřka: '+width);
  console.log('Výška: '+height);
});
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +2 20. ledna 19:03
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na 1Pupik1989
Taskkill:

Mas pravdu, nacitat ho do DOMu by bylo zbytecne (malo jsem se nad tim zamyslel) . Za me palec navic za nove a doporucovane reseni.

Pro Maxy_obra ... to co radi Pup je o neco pohodlnejsi, ale aby te to nematlo, pokud udelas var obrazek = document.crea­teElement("im­g"); dostanes to same jen mu source dosadis pomoci obrazek.setAt­tribute("src", odkaz); a pak s nim muzes pracovat stejne

nicmene bych ti doporucil to co radi Pup

 
Nahoru Odpovědět 20. ledna 20:24
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Taskkill
1Pupik1989:

Obojí vrací instanci

HTMLImageElement

. Sice je v tom nějaký rozdíl, ale už si nepamatuji jaký.

 
Nahoru Odpovědět 20. ledna 21:20
Avatar
Maxy_obr
Člen
Avatar
Odpovídá na 1Pupik1989
Maxy_obr:

Díky moc, ještě by mě zajímalo jaká je nejjednodušší cesta dostat proměnné z JS do PHP.

 
Nahoru Odpovědět 3. února 12:53
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Maxy_obr
Taskkill:

Na tomhle miste bych pouzil AJAX http request. Je o tom tady uvod v sekci Javascript, tam najdes vsechno co budes potrebovat, v zasade to ale funguje tak, ze si vyberes metodu (bezne GET nebo POST) na pozadi (bez refreshovani stranky) zavolas server a predas mu parametry, umoznuje ti to parametry bezne pojmenovat, takze na strane serveru se nemusis ani bat, ze nebudes vedet jaka hodnota je jaka promenna. A pokud to planujes opravdu delat jen obcas, skutecne se ti nejvic vyplati ten AJAX.

Kdybys to chtel sypat furt, rekneme sto hodnot do sekundy a jeste neco obdrzet zpet, proste takovej stream, no tak pak uz by se ti hodily sockety. Ale to asi nebude tvuj pripad.

 
Nahoru Odpovědět 3. února 13:21
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Prošel jsem si to a trochu tápu nad tím jak používat metodu post. Vytvořil jsem.

getImageSize('<?php echo $_POST["picture"]; ?>',function(width,height){
                console.log('šířka: '+width);
                          console.log('Výška: '+height);
        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                        if (xhttp.readyState == 4 && xhttp.status == 200) {
                                document.getElementById("test").innerHTML = xhttp.responseText;
                        }
                        };
                        xhttp.open("POST", "/data.php", true);
        xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                        xhttp.send("width="+width);
                                });

// tady ukládám do databáze

// tady začíná body

Problém nebo jenom moje nepochopení je v tom, že to potřebuji pochopitelně provést ještě před vypisováním body. Ale data.php vkládám až do body takže to hlásí chybu. Já vlastně vůbec nepotřebuju vkládat nikam nic, potřebuji si pouze poslat pouze ten POST. A nevím jak na to.

 
Nahoru Odpovědět 4. února 11:09
Avatar
Maxy_obr
Člen
Avatar
Maxy_obr:

Tak jsem to vyřešil trochu jinak. Vytvořil jsem si na šířku a výšku inputy a pouze jim doplnil value hodnotou z funkce. A teď už je jednoduše mohu odeslat. Ale pokud se ti bude chtít budu rád za objasnění toho POSTu.

 
Nahoru Odpovědět 4. února 12:00
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.