Autor Zpráva
Dusann
Profil
Snažím sa urobiť client-side preview z obrázkov ktoré si uživateľ vyberie cez input tag na stránke. Zatiaľ sa mi ale nepodarilo vyriešiť ako tento skript urobiť aby bol "performance friendly". Pri veľkom množstve obrázkov skript začne pravdepodobne žrať veľa pamäte a browser začne byť pomalý a zasekáva sa.

Aktuálne som proces vytvárania thumbnail-u riešil vygenerovaním dočasného obrázka, ktorý má ako src nastavné object-URL reprezentujúce Blob z FileListu. Následne je obrázok použitý ako kresba do canvas a samotný canvas je pripojený do DOM.

Po zjednodušení vyzerá základ skriptu takto:

document.getElementById("image-upload").onchange = function(){
  var fileList = this.files;
  var i = 0;
  function  createThumbnail(){
                          
    objURL = URL.createObjectURL(fileList[i]);
    var img = document.createElement("IMG");
    
    img.onload = function(){
        var drawing = document.createElement("canvas");
        drawing.width = 100;
        drawing.height = 100;
        var ctx = drawing.getContext("2d");
        ctx.drawImage(this,0,0,100,100);
        document.body.appendChild(drawing);
        img = null;
        URL.revokeObjectURL(objURL);
        i++;
        if(i < fileList.length){
            createThumbnail();
        }
    };
    img.src = objURL;
    } 

createThumbnail();
};

Nie je to ale dobre použiteľné, pretože pri veľkom množstve obrázkov to žerie veľa prostriedkov.

Skúšal som aj hotové riešenia - Plupload aj Real Ajax Uploader majú rovnaký problém ako ja, ale jQuery File Upload funguje dobre - veľmi rýchlo vie načítať obrovské množstvo obrázkov do miniatúr bez performance problémov. Snažil som sa zistiť aký postup použili ale celý kód má neštandartnú syntax, pravdepodobne je tam použitý nejaký JS framework.

Kde môže byť chyba v mojom skripte, ktorá spôsobuje zaťaženie browsera pri veľkom množstve obrázkov ?
pcmanik
Profil
Dusann:
A načo to vôbec dávaš do canvasu? Veľkosť výsledného obrázku si nastavíš v CSS.

Stačí ti niečo takéto:
var img = document.createElement("img");

img.src = window.URL.createObjectURL(fileList[i]);
img.onload = function() {
    window.URL.revokeObjectURL(this.src);
}
document.body.appendChild(img);
Dusann
Profil
pcmanik:
A načo to vôbec dávaš do canvasu? Veľkosť výsledného obrázku si nastavíš v CSS.

No lebo obrázok odkazuje na jeho plnú/originálnu veľkosť. A pokiaľ ide o väčšie obrázky, tak pri ich veľkom množstve to zaťažuje browser. Canvas by mal redukovať veľkosť obrázka počas škálovania, ponechá iba pixely pre konkrétny rozmer.

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: