Javascript 如何在使用“转换画布时设置图像质量”；toDataURL“；方法？

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

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

它没有给我一个高质量的选择。有没有别的图书馆我可以用

---

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

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

canvas.toDataURL(type,quality);

你有更多的信息

我认为一旦转换，就不可能知道图像的质量。正如您在上面看到的，在控制台上打印值时，您得到的唯一信息是类型和图像代码本身

下面是我为了解浏览器使用的默认质量值而编写的代码片段

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

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（0,0150,75）；
var url=c.toDataURL（'image/jpeg'）；
var v=0
对于（变量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（'默认值为：'+x）；
}
}

基本上，我认为图像本身的变化会反映在base64字符串上。因此，代码只需在

toDataURL（）

方法上尝试所有可能的值，并将结果字符串与默认字符串进行比较。这似乎奏效了。对于铬，我得到0.92

是小提琴上的工作示例。

使用一种非常简单且易读的方式，如下所示：

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

这还允许您使用其他选项，使您能够裁剪图像等：

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

---

jsFIDLE:

firefox上的默认值在Chrome32.Agh上也是0.920.92。我认为这是一个Fabric.js的东西。我的错误。我想将示例的url更新为。原始的JSFIDLE示例url是。我更新了CDN库，使导出示例更具描述性和意义。此外，我还添加了互动按钮。