Autor Zpráva
pinlop
Profil
Potřeboval bych script, který by mi umožnil:
- načtení obrázku přes input (neukládat ho)
- v případě, že je obrázek velký, zmenšit ho na width:680px. ( A aby zabíral co nejméně MB, v přijatelné kvalitě)
- Vykreslit ho do <img scr="....." >

Pro načtení a následné zobrazení obrázku bez ukládání na server jsme našel toto, viz níže. Pro zmenšení obrázku je zřejmě zapotřebí jít ještě přes <canvas> Potřebuji ho ale poté vykreslit do <img... .

Existuje nějaká možnost?

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">


function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
Keeehi
Profil
pinlop:
A k čemu to má celé sloužit?
MartinP_
Profil *
function resizeImage(dataUri, targetWidth, callback) {
  var image = new Image();
  image.src = dataUri;
  image.onload = function() {
    var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d");
    
    canvas.width = targetWidth;
    canvas.height = (targetWidth / image.width) * image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
    callback(canvas.toDataURL());    
  }
}

Živá ukázka
_es
Profil
MartinP [#3]:
Udalosť onload by mala byť nastavená ešte pre nastavením vlastnosti src.
pinlop
Profil
Jedná se o stránku, kde je textový editor, rád bych do něj chtěl ještě vkládat obrázek. Vše mi funguje pouze s <img.. který ale nezabírá moc místa. V případě, že uživatel vloží obrázek s 5mb, při dalších akcí s editorem se to značně zpomalí. Navíc je zbytečné vkládat tak velký obrázek, když bude finálně width:680px.
Obrázek se ukládá až při stisknutí uložit. Ukládá se vše co je v editoru, tedy i obrázek, tagy a data uri (<img src="data uri..... )

Snad jsem to napsal srozumitelně.
pinlop
Profil
Ještě se zeptám, vše funguje jak má, ale obrázky zabírají stále mnoho místa. Lze obrázek ještě něčím zmenšit? Například když uložím obrázek který má 7 MB, uloží se mi na 1 MB. Rád bych se dostal pod 100Kb.
Nebo když obrázek, který má 159KB (1600x1067), zmenšuji na width:267px, po uložení zabírá 123Kb.
Bubák
Profil
Koukal jsem teď narychlo na HTMLCanvasElement.toDataURL(), výchozí formát je PNG. Stačí změnit na formát JPEG s kvalitu nastavit mezi 60 až 95 procenty. Pokud chceš mít datově vo nejmenší obrázku, doporučuji knalitu nastavit na 75 %, tedy 0.75, pokud chceš mít vysokou kvalitu a dobrá poměr datová velikost / vizuální kvalita, doporučuji nastavit na 0.9, vešší hodnoty, než 0.95 postrádají smysl, bo i při nastavení 1 je JPEG komprese ztrátová, viz člátek, tabulka a graf www.root.cz/clanky/jpeg-kral-rastrovych-grafickych-formatu/#k07

Další možnosti nastavení pro JPEG, kterými oplývají komfortnější grafické programy (podvzorkování barev, standardní nebo progresivní , práce s EXIF) bohužel nejsou k dispozici, a třebas EXIF je zahozen.
Stačí změnit 11. řádek skriptu:
callback(canvas.toDataURL("image/jpeg", 0.9));
Živá ukázka
Kvalita je záměrně nastavena na nízkou hodnotu 20 %, abys ji byl nucen zvýšit ;-)
pinlop
Profil
To je přesně ono. Děkuji mnohokrát.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: