Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
maxy obr
Člen
Avatar
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na maxy obr
Neaktivní uživatel:18.1.2016 11:21

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
Nahoru Odpovědět
18.1.2016 11:21
Neaktivní uživatelský účet
Avatar
maxy obr
Člen
Avatar
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
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na maxy obr
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č
Řešení problému
 
Nahoru Odpovědět
20.1.2016 19:03
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na 1Pupik1989
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.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.1.2016 20:24
Neaktivní uživatelský účet
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
maxy obr
Člen
Avatar
Odpovídá na 1Pupik1989
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na maxy obr
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
Avatar
maxy obr
Člen
Avatar
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
Avatar
maxy obr
Člen
Avatar
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.