javascript - 使用 "toDataURL"方法转换 Canvas 时如何设置图像质量？

Question

我想在将 Canvas 元素编码为 jpg 时设置品质因数。

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

它没有给我质量选项。我可以使用替代库吗？

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

Answer 1

函数的第二个参数是质量。范围从 0.0 到 1.0

canvas.toDataURL(type,quality);

Here你有扩展信息

而且我认为一旦转换就不可能知道图像的质量。正如你在这个 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);
        }
    }

基本上我认为图像本身的变化会反射(reflect)在 base64 字符串上。因此，代码只是在 toDataURL() 方法上尝试所有可能的值，并将结果字符串与默认字符串进行比较。它似乎有效。对于 Chrome ，我得到 0.92。

Here是 fiddle 上的工作示例。