Javascript：在画布上绘制时图像的大小变成其两倍

如何解决Javascript：在画布上绘制时图像的大小变成其两倍

我正在上传image file（大小368KB），并将其读取为64位数据网址。数据网址的大小为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,element.width,element.height);

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

    fileReader.readAsDataURL(inputFile);
  }

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

解决方法

是什么原因？

原因之一是：您尝试上传jpg图片，但是当您尝试通过以下方式制作复制版本时：

const tempImage = new Image();

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

document.body.appendChild(tempImage);

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