如何在使用"toDataURL"转换画布时设置图像质量?方法? [英] How to set the image quality while converting a canvas with the "toDataURL" method?

问题描述

当我将画布元素编码为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);

此处您具有扩展信息

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

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.

此处是小提琴上的有效示例.

Here is the working example on a fiddle.

这篇关于如何在使用"toDataURL"转换画布时设置图像质量?方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！