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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

maxy obr

Člen

maxy obr:18.1.2016 9:40

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.1.2016 9:40

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:18.1.2016 11:21

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

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.
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.1.2016 11:21

Nahoru Odpovědět

18.1.2016 11:21

Neaktivní uživatelský účet

maxy obr

Člen

maxy obr:20.1.2016 11:18

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.1.2016 11:18

1Pupik1989

Člen

1Pupik1989:20.1.2016 19:03

Ú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í
+2,50 Kč

Nahoru Odpovědět

20.1.2016 19:03

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:20.1.2016 20:24

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.createElement("img"); dostanes to same jen mu source dosadis pomoci obrazek.setAttribute("src", odkaz); a pak s nim muzes pracovat stejne

nicmene bych ti doporucil to co radi Pup

Nahoru Odpovědět

20.1.2016 20:24

Neaktivní uživatelský účet

1Pupik1989

Člen

1Pupik1989:20.1.2016 21:20

Obojí vrací instanci

HTMLImageElement

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

Nahoru Odpovědět

20.1.2016 21:20

maxy obr

Člen

maxy obr:3.2.2016 12:53

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.2.2016 12:53

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:3.2.2016 13:21

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.2.2016 13:21

Neaktivní uživatelský účet

maxy obr

Člen

maxy obr:4.2.2016 11:09

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.2.2016 11:09

maxy obr

Člen

maxy obr:4.2.2016 12:00

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.2.2016 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.

Nejčastěji vyhledáváné

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