设置画布toDataURL jpg质量

Question

我想在将canvas元素编码为jpg时设置质量设置.

var data = myCanvas.toDataURL( "image/jpeg" );

不给我一个高质量的选择.我可以使用替代库吗？

相关:不同浏览器使用的默认质量设置是什么？

Answer 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.

这是小提琴上的工作示例.

Answer 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/7f9bqs00/30/