Cómo escalar una imagen (en formato de URI de datos) en JavaScript (escalado real, sin utilizar el estilo)

Question

Estamos capturando una pestaña visible en un navegador Chrome (utilizando la API de extensiones chrome.tabs.captureVisibleTab) y recibiendo una instantánea en el esquema de URI de datos (cadena codificada en Base64).

¿Existe una biblioteca JavaScript que se pueda usar para reducir una imagen a un tamaño determinado?

Actualmente lo estamos diseñando a través de CSS, pero tenemos que pagar penalizaciones de rendimiento ya que las imágenes son en su mayoría 100 veces más grandes que las requeridas. Una preocupación adicional es también la carga en el Almacén local que usamos para guardar nuestras instantáneas.

¿Alguien sabe de una manera de procesar este esquema de URI de datos de imágenes formateadas y reducir su tamaño al reducirlas?

Referencias:

• datos esquema URI de la API http://en.wikipedia.org/wiki/Data_URI_scheme
• Extensiones Chrome en http://code.google.com/chrome/extensions/tabs.html
• El "Pestañas cerradas recientemente" extensión de Chrome en http://code.google.com/p/recently-closed-tabs

Answer 1

Aquí hay una función que debe hacer lo que necesita. Le otorga la URL de una imagen (por ejemplo, el resultado de , pero podría ser cualquier URL), el tamaño deseado y una devolución de llamada. Se ejecuta de forma asíncrona porque no hay garantía de que la imagen se cargue inmediatamente cuando configure la propiedad src. Con una URL de datos probablemente lo hará ya que no necesita descargar nada, pero no lo he probado.

La devolución de llamada pasará la imagen resultante como una URL de datos. Tenga en cuenta que la imagen resultante será un PNG, ya que la implementación de Chrome de toDataURL no es compatible con la imagen/jpeg.

function resizeImage(url, width, height, callback) { 
    var sourceImage = new Image(); 

    sourceImage.onload = function() { 
     // Create a canvas with the desired dimensions 
     var canvas = document.createElement("canvas"); 
     canvas.width = width; 
     canvas.height = height; 

     // Scale and draw the source image to the canvas 
     canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height); 

     // Convert the canvas to a data URL in PNG format 
     callback(canvas.toDataURL()); 
    } 

    sourceImage.src = url; 
} 

Answer 2

En cuanto a los problemas de rendimiento, tal vez la etiqueta del lienzo podría ayudar? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Si carga la imagen, la visualiza con drawImage y luego trata de desecharla, puede tener éxito. Pero no estoy seguro de cómo serializar un lienzo como una imagen para guardar el archivo redimensionado ...