Я хочу установить параметр качества, когда я кодирую элемент canvas в jpg.
var data = myCanvas.toDataURL( "image/jpeg" );
не дает мне качественной опции. Есть ли альтернативная библиотека, которую я могу использовать?
Связано: каков параметр качества по умолчанию, используемый разными браузерами?
Второй аргумент функции - качество. Он варьируется от 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.
Здесь - рабочий пример на скрипке.
Изменить: Если вы используете 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/