Cómo escalar una imagen (en formato de URI de datos) en JavaScript (escala real, no usando el estilo)

Question

Estamos capturando una ficha visible en un navegador Chrome (mediante el uso de las extensiones API chrome.tabs.captureVisibleTab) y recibir una instantánea en el esquema de URI de datos (Base 64 codificado cadena).

¿Hay una biblioteca JavaScript que se puede utilizar de bajar una imagen a un tamaño determinado?

Actualmente estamos creando un estilo personal a través de CSS, pero tenemos a penalizaciones de rendimiento de pago según las imágenes son en su mayoría 100 veces más grande de lo necesario. preocupación adicional es también la carga en el almacenamiento local que utilizamos para salvar nuestras instantáneas.

¿Alguien sabe de una manera de procesar estos datos esquema URI con formato imágenes y reducir su tamaño mediante el escalado hacia abajo?

Referencias:

• Datos URI esquema sobre http://en.wikipedia.org/wiki/Data_URI_scheme
API
• 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 / cerrados recientemente-pestañas

Answer 1

Esta es una función que debe hacer lo que necesita. Se le da la dirección URL de una imagen (por ejemplo, el resultado de chrome.tabs.captureVisibleTab, 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 cargará inmediatamente cuando se establece la propiedad src. Con una URL de datos es probable que, ya que no es necesario descargar nada, pero yo no lo he probado.

La función se le pasará la imagen resultante como una dirección URL de datos. Tenga en cuenta que la imagen resultante será un PNG, puesto que la aplicación de toDataURL de Chrome no es compatible image / 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 canvas podría ayudar? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Si se carga la imagen, mostrarlo con drawImage y luego tratar de desprenderse de ella, puede tener éxito. Pero no estoy seguro de cómo serializar un lienzo como una imagen para guardar el archivo redimensionada ...