Javascript：在画布上绘制图像时，图像大小变为两倍

Posted 2023-03-24

【中文标题】Javascript：在画布上绘制图像时，图像大小变为两倍

【英文标题】：Javascript: Image becomes twice its size when painted on canvas

【发布时间】：2021-01-16 20:24:13

【问题描述】：

我正在上传 image file（大小 368KB）并将其作为 64 位 数据 url 读取。数据 url 的大小为 501999 字节。当我现在在画布上绘制它并尝试查找画布的数据 url 的大小时，我得到的大小为 1091506 字节。

我可以期待在画布上绘制后会有所增加，但是将图像吹到两倍大小的图像非常奇怪。如果我使用230KB 左右的图像，图像会膨胀到其原始大小的 8-9 倍以上。但是，如果我使用50KB 左右的图像，大小的增加只是微不足道的。

什么原因？

Stackblitz 是 here

let uploadElement = document.getElementById('upload')
uploadElement.onchange = onImageChange;

function onImageChange()
    let inputFile = event.target.files[0];

    let fileReader = new FileReader();
    
    fileReader.onload = function(event)

      let imageAsBase64 = event.target.result;
      let initialSize = imageAsBase64.length;
      console.log(initialSize);

      const tempImage = new Image();//  <htmlImageElement>document.getElementById('test');
      tempImage.src = imageAsBase64;

      tempImage.onload = () => 
        const element = document.createElement('canvas');
        
        element.width = tempImage.width;
        element.height = tempImage.height;

        const ctx = element.getContext('2d');
        ctx.drawImage(tempImage, 0, 0, element.width, element.height);

        let endSize = element.toDataURL().length;
        console.log(endSize);
      
    

    fileReader.readAsDataURL(inputFile);
  

<input type="file" id="upload" name="image"/>

【参考方案1】：

什么原因？

其中一个原因是：您正在尝试上传 jpg 图像，但是当您尝试通过以下方式制作复制版本时：

const tempImage = new Image();

它确实制作了png 格式的新图像。您可以通过下载复制的版本来检查：

document.body.appendChild(tempImage);

这就是为什么你有不同的尺寸。

【讨论】：

我使用了来自here 的 png 文件，它的大小仍然有很大的增加（891634KB 到 1154550KB）。文件更小，但差异并不大。

@Daud 891634 和 1154550 不是图像尺寸。这是base64字符串的长度。所以，它应该是891634 字符和1154550 字符。它们的大小相同：16.9M

它是Base64字符串的长度，没错，但是这些长度不是文件大小的指示吗？ 16.9M的图我也看不懂。我从上述网站下载的文件是668KB。