Come posso generare una miniatura lato client in un browser moderno?

Question

Sto cercando un modo elegante per generare una miniatura da utilizzare con lo FileAPI. Attualmente ho un DataURL che rappresenta un'immagine. Il problema è che, se l'immagine è molto grande, piuttosto che spostarla e rerenderla diventa un uso intensivo della CPU. Posso vedere 2 opzioni per aggirare questo.

• generare una miniatura sul client
• Generare una miniatura sul server, inviare la miniatura al client (AJAX).

Con HTML5 abbiamo un elemento canvas? Qualcuno sa come usarlo per generare miniature dalle immagini? Non devono essere perfetti - la qualità del campionamento è accettabile. Esiste un plug-in jQuery che farà questo per me? C'è un altro modo per accelerare l'uso del client di immagini di grandi dimensioni?

sto usando HTML5, e Firefox 3.6+: non v'è alcuna necessità di sostenere qualcosa di diverso Firefox 3.6+, si prega di non fornire suggerimenti per IE 6.0

Answer 1

Va bene, il modo in cui posso vedere questo lavoro sta elaborando l'immagine la tela a una dimensione più piccola, quindi esportando la tela. Dire che si desidera una miniatura 64px:

var thumbSize = 64; 
var canvas = document.getElementById("canvas"); 
canvas.width = thumbSize; 
canvas.height = thumbSize; 
var c = canvas.getContext("2d"); 
var img = new Image(); 
img.onload = function(e) { 
    c.drawImage(this, 0, 0, thumbSize, thumbSize); 
    document.getElementById("thumb").src = canvas.toDataURL("image/png"); 
}; 
img.src = fileDataURL; 

Con questo codice, un elemento immagine con il "pollice" ID viene utilizzato come elemento miniatura. fileDataURL è l'URL di dati ottenuto dall'API del file.

Maggiori informazioni sul disegno immagini per la tela: http://diveintohtml5.info/canvas.html#images

E sull'esportazione di dati tela: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

Answer 2

Ecco cosa si può fare:

function getThumbnail(original, scale) { 
    var canvas = document.createElement("canvas"); 

    canvas.width = original.width * scale; 
    canvas.height = original.height * scale; 

    canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height); 

    return canvas 
} 

Ora, per creare le miniature, è sufficiente fare l'equivalente di questo:

var image = document.getElementsByTagName("img")[0]; 
var thumbnail = getThubmnail(image, 1/5); 

document.body.appendChild(thumbnail); 

Nota: Ricordarsi di assicurarsi che l'immagine sia stata caricata (usando onload) prima di provare a fare una miniatura.