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

2022-01-17 00:00:00 image jpeg png javascript html5-canvas

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

I want to set the quality factor when I encode a canvas element to jpg.

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

它没有给我一个高质量的选择.我可以使用其他库吗?

It does not give me a quality option. Is there an alternative library I can use?

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

Related: what is the default quality setting used by the different browsers?

推荐答案

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

The second argument of the function is the quality. It ranges from 0.0 to 1.0

canvas.toDataURL(type,quality);

这里你有扩展信息

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

And I don't think it's possible to know the quality of the image once is converted. As you can see on this feedle the only information you get when printing the value on the console is the type and the image code itself.

这是我制作的一段代码，用于了解浏览器使用的质量的默认值.

Here's a snippet of code I made to know the default value of the quality used by the browser.

    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.

Basically I thought that the change on the image itself would be reflected on the base64 string. So the code just try all the possible values on the toDataURL() method and compares the resulting string with the default one. And it seems to work. For chromium I get 0.92.

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

相关文章