Настройка canvas toDataURL jpg quality

Ответ 1

Второй аргумент функции - качество. Он варьируется от 0.0 до 1.0

canvas.toDataURL(type,quality);

Здесь у вас есть расширенная информация

И я не думаю, что можно узнать качество изображения, которое когда-то было преобразовано. Как вы можете видеть на этом feedle, единственная информация, которую вы получаете при печати значения на консоли, - это тип и сам код изображения.

Вот фрагмент кода, который я сделал, чтобы узнать значение качества, используемое браузером по умолчанию.

    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);
        }
    }

В основном я думал, что изменение самого изображения будет отражено на строке base64. Поэтому код просто пробует все возможные значения в методе toDataURL() и сравнивает результирующую строку со значением по умолчанию. И это работает. Для хрома я получаю 0,92.

Здесь - рабочий пример на скрипке.

Ответ 2

Изменить: Если вы используете Fabric.js, другой, очень простой и понятный для человека способ:

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

Это также позволяет вам иметь другие параметры, предоставляя вам возможность обрезать изображение и т.д.:

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

jsFiddle: http://jsfiddle.net/fabricjs/NfZVb/