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

IT技术 javascript image html5-canvas png jpeg
2021-03-06 03:24:23

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

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

它没有给我一个高质量的选择。有我可以使用的替代库吗?

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

2个回答

该函数的第二个参数是质量。它的范围从 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。

是小提琴的工作示例。

firefox 上的默认值也是 0.92
2021-04-29 03:24:23
在 Chrome 32 上也是 0.92。
2021-05-14 03:24:23

使用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/

啊。我认为这是 Fabric.js 的事情。我的错。
2021-04-18 03:24:23
我想将示例的 url 更新为jsfiddle.net/7f9bqs00/30原始 jsFiddle 示例网址是jsfiddle.net/fabricjs/NfZVb我更新了 CDN 库,使导出示例更具描述性和意义。此外,我添加了交互按钮。
2021-04-21 03:24:23