| 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. |
||
|
Časová prodleva: 7 let
|
|||
0