¿Cómo puedo generar una miniatura del lado del cliente en un navegador moderno?

Question

Estoy buscando una forma elegante de generar una miniatura para usar con el FileAPI. Actualmente obtengo un DataURL que representa una imagen. El problema es que si la imagen es muy grande, en lugar de moverla y volver a generarla se convierte en un uso intensivo de la CPU. Puedo ver 2 opciones para evitar esto.

• generar una miniatura en el cliente
• Generar una miniatura en el servidor, enviar la miniatura de vuelta al cliente (AJAX).

¿Con HTML5 tenemos un elemento canvas? ¿Alguien sabe cómo usarlo para generar miniaturas de imágenes? No tienen que ser perfectos, la calidad del muestreo es aceptable. ¿Hay un complemento jQuery que haga esto por mí? ¿Hay alguna otra forma de acelerar el uso de grandes imágenes en el lado del cliente?

estoy usando HTML5 y Firefox 3.6+: no hay necesidad de apoyar a otra cosa que no sea Firefox 3.6+, por favor no proporcione sugerencias para IE 6.0

Answer 1

bien, la forma en que puedo ver este trabajo está llegando a la imagen el lienzo en un tamaño más pequeño, y luego exportar el lienzo. Digamos que quiere 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 este código, un elemento de imagen con el "pulgar" ID se utiliza como elemento de miniaturas. fileDataURL es la URL de datos que obtuvo de la API del archivo.

Más información en la elaboración de imágenes a la lona: http://diveintohtml5.info/canvas.html#images

Y en la exportación de los datos de la lona: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

Answer 2

Esto es lo que puede hacer:

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 
} 

Ahora, para crear imágenes en miniatura, simplemente hacer el equivalente de esto:

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

document.body.appendChild(thumbnail); 

Nota: Recuerde asegurarse de que la imagen esté cargada (usando onload) antes de intentar hacer una miniatura de la misma.