¿Cómo configurar la calidad de la imagen al convertir un lienzo con el método “toDataURL”?

Solución:

El segundo argumento de la función es la calidad. Va de 0.0 a 1.0

canvas.toDataURL(type,quality);

Aquí tienes información ampliada

Y no creo que sea posible conocer la calidad de la imagen una vez convertida. Como puede ver en este feed, la única información que obtiene al imprimir el valor en la consola es el tipo y el código de la imagen en sí.

Aquí hay un fragmento de código que hice para conocer el valor predeterminado de la calidad utilizada por el navegador.

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);

    var url = c.toDataURL('image/jpeg');
    var v = 0
    for(var i = 0; i < 100; i++ ){

        v += 0.01;
        x = parseFloat((v).toFixed(2))
        var test = c.toDataURL('image/jpeg', x);

        if(test == url){
            console.log('The default value is: ' + x);
        }
    }

Básicamente, pensé que el cambio en la imagen en sí se reflejaría en la cadena base64. Entonces, el código solo prueba todos los valores posibles en el toDataURL() y compara la cadena resultante con la predeterminada. Y parece funcionar. Para el cromo obtengo 0,92.

Aquí está el ejemplo de trabajo en un violín.

El uso de Fabric.js, una forma muy simple y legible por humanos, es la siguiente:

canvas.toDataURL({
   format: 'jpeg',
   quality: 0.8
});

Esto también te permite tener otras opciones, dándote la posibilidad de recortar la imagen, etc.

canvas.toDataURL({
    format: 'png',
    left: 300,
    top: 250,
    width: 200,
    height: 150
})

jsFiddle: http://jsfiddle.net/7f9bqs00/30/

---

---

Utiliza Nuestro Buscador