如何在转换画布时设置图像质量;toDataURL”;方法

How to set the image quality while converting a canvas with the "toDataURL" method?

本文关键字：图像质量 toDataURL 方法 设置 布时 转换      更新时间：2023-09-26

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

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

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

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

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

canvas.toDataURL(type,quality);

这里有扩展信息

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

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

    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。

这是小提琴的工作示例。

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

const fullQuality = canvas.toDataURL('image/jpeg', 1.0);
const mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
const lowQuality = canvas.toDataURL('image/jpeg', 0.1);
// output: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"

使用jpegs|MDN 设置图像质量

如果您想提高fabricJS中的canvas.toDataUrl((的质量，格式为"png"，请使用属性"multiplier"。这仅适用于PNG格式。请检查以下代码

 const dataURL = canvas.toDataURL({
    width: canvas.width,
    height: canvas.height,
    left: 0,
    top: 0,
    format: "png",
    multiplier: 2
  });
相关文章：