javascript - 为什么画布会加倍图像的大小？

Question

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

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的图像，我得到

大小1 2,318,839

大小2 4,702,282。

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

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

标签： javascripthtmlhtml5-canvas

Answer 1

更改以下行：

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

至：

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