设置画布toDataURL jpg质量 [英] setting canvas toDataURL jpg quality

问题描述

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

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

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

不给我一个高质量的选择。我可以使用替代库吗？

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.

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

Here is the working example on a fiddle.

这篇关于设置画布toDataURL jpg质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！