javascript - imagen - htmlcanvaselement todataurl()

Canvas toDataUrl aumenta el tamaño del archivo de la imagen

Question

Cuando uso toDataUrl () para establecer el origen de una etiqueta de imagen, descubro que la imagen cuando se guarda es mucho más grande que la imagen original.

En el siguiente ejemplo, no estoy especificando un segundo parámetro para la función toDataUrl, por lo que se está utilizando la calidad predeterminada. Esto está dando como resultado una imagen mucho más grande que el tamaño de la imagen original. Cuando se especifica 1 para calidad total, la imagen generada es aún mayor.

¿Alguien sabe por qué está sucediendo esto o cómo puedo detenerlo?

            // create image
            var image = document.createElement(''img'');

            // set src using remote image location
            image.src = ''test.jpg'';

            // wait til it has loaded
            image.onload = function (){

            // set up variables
            var fWidth = image.width;
            var fHeight = image.height;

            // create canvas
            var canvas = document.createElement(''canvas'');
            canvas.id = ''canvas'';
            canvas.width = fWidth;
            canvas.height = fHeight;
            var context = canvas.getContext(''2d'');

            // draw image to canvas
            context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);

            // get data url 
            dataUrl =  canvas.toDataURL(''image/jpeg'');

            // this image when saved is much larger than the image loaded in
            document.write(''<img src="'' + dataUrl + ''" />'');

            }

Gracias: D

Aquí hay un ejemplo, desafortunadamente la imagen no puede ser de dominio cruzado, así que solo tengo que extraer una de las imágenes jsfiddle.

http://jsfiddle.net/ptSUd/

La imagen es de 7.4 kb, si luego guarda la imagen que se está emitiendo, verá que es de 10 kb. La diferencia es más notable con imágenes más detalladas. Si configura la calidad toDataUrl en 1, la imagen es entonces de 17 kb.

También estoy usando FireFox 10 para esto, cuando utilizo Chrome los tamaños de imagen son aún más grandes pero no tanto.

Answer 1

El tamaño de la imagen está determinado principalmente por la calidad del codificador incorporado en el navegador. Tiene muy poco que ver con el tamaño de la imagen original. Una vez que dibuja algo en un canvas todo lo que tiene son píxeles, ya no tiene la imagen original. toDataURL no reconstituye mágicamente una imagen que se pintó en el canvas . Si desea un archivo con el mismo tamaño que la imagen original: use la imagen original.

Answer 2

La cadena devuelta por el método toDataURL() no representa los datos originales.

Acabo de realizar algunas pruebas exhaustivas, que mostraron que la URL de datos creada depende del navegador ( no del sistema operativo).

 Environment             -    md5 sum                       - file size
    Original file        - c9eaf8f2aeb1b383ff2f1c68c0ae1085 - 4776 bytes
WinXP Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Firefox 10.0.2     - 4f184006e00a44f6f2dae7ba3982895e - 3909 bytes

El método para obtener el URI de datos no tiene importancia, el siguiente fragmento se usó para verificar que el URI de datos de una carga de archivo también sea diferente:

Caso de prueba: http://jsfiddle.net/Fkykx/

<input type="file" id="file"><script>
document.getElementById(''file'').onchange=function() {
    var filereader = new FileReader();
    filereader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            var c = document.createElement(''canvas''); // Create canvas
            c.width = img.width;
            c.height = img.height;  c.getContext(''2d'').drawImage(img,0,0,img.width,img.height);
            var toAppend = new Image;
            toAppend.title = ''Imported via upload, drawn in a canvas'';
            toAppend.src = c.toDataURL(''image/png'');
            document.body.appendChild(toAppend);
        }
        img.src = event.target.result; // Set src from upload, original byte sequence
        img.title = ''Imported via file upload'';
        document.body.appendChild(img);
    };
    filereader.readAsDataURL(this.files[0]);
}
</script>

Answer 3

Parece kiriloid y Rob lo clavó. Tuve este problema también y parece ser un combo:

• el dataURL usa codificación base64 que lo hace alrededor de 1.37 X más grande
• cada navegador procesa la función toDataURL de forma diferente

tamaño de imagen codificado en base64

Probé mi generador de miniaturas en win8.1 firefox y chrome y obtuve los tamaños de cadena de dataURL:

• firefox = 3.72kB
• chrome = 3.24kB

Mi imagen original cuando se convirtió a dataURL pasó de 32kB a 45kB.

Creo que la parte de base64 es el factor más grande, así que supongo que ahora mi plan es convertir el dataURL a una matriz de bytes binarios antes de almacenarlo en el servidor (probablemente en el lado del cliente porque mi servidor es flojo).