为什么画布会使图像的大小翻倍？答案

【问题标题】：Why canvas doubles the size of an image?为什么画布会使图像的大小翻倍？
【发布时间】：2019-07-12 20:36:20
【问题描述】：

我试图使用canvas 压缩来自file input 的图像。我在这里阅读了答案，有人说画布使文件更大，一些人用它来压缩图像，因为我是新手：

function compressImg(img){
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");
    canvas.width=img.width/2;
    canvas.height=img.height/2;
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
    document.getElementById("imagePreview0").src = canvas.toDataURL();
    const data = ctx.canvas.toDataURL(img, "image/jpeg", 0.1);
    console.log("size2",data.length);
}


var img = new Image();
img.onload = function(){
    console.log("size1",file.length);
    compressImg(img);
};
img.src = file;

对于 mac 上显示 1.7M 的图像，我得到了

size1 2,318,839

size2 4,702,282。

那么 - 你真的可以压缩图像吗？

我只需要将文件大小减小到2M以下。

【问题讨论】：

Afaik，toDataURL 使用 base64，根据定义，它的字符比二进制多。这并不意味着保存的图像也会更大。
toDataURL 确实更大，但只有四分之一，而不是两倍。所以它仍然应该小于原始大小，因为这仍然是目标。相反，它翻了一番。为什么？
您可以使用此方法获取数据的大小：stackoverflow.com/questions/47852277/…
@enxaneta 谢谢，我试过了，我得到了 3526695，它仍然大了 1M，而不是小了。不知道这里发生了什么，也找不到合适的解释。

标签： javascript html html5-canvas

【解决方案1】：

更改以下行：

const data = ctx.canvas.toDataURL(img, "image/jpeg", 0.1);

收件人：

const data = canvas.toDataURL("image/jpeg", 0.1);

【讨论】：