使用Canvas缩放Quill编辑器上传图片显示空白矩形问题求助

• 图片加载是异步操作，你给img.src赋值后，浏览器需要时间加载、解码图片资源，你的代码在赋值后立刻执行drawImage，此时img还没有有效像素内容，绘制出来就是空白内容。
• 你没有显式设置canvas的width和height属性，canvas默认尺寸为300×150，就算你在drawImage中指定了绘制尺寸，也只能在canvas默认的尺寸范围内绘制，最终导出的Blob也会是默认canvas的尺寸。

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
  // Resizing
  const img = document.createElement("img");
  const imgLoadPromise = new Promise((resolve) => {
    img.onload = resolve;
  });
  img.src = URL.createObjectURL(file);
  // 等待图片加载完成
  await imgLoadPromise;

  const canvas = document.createElement("canvas");
  // 显式设置canvas尺寸为目标缩放尺寸
  canvas.width = 200;
  canvas.height = 200;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, 200, 200);
  const newFile = await new Promise(resolve => canvas.toBlob(resolve));
  document.getElementById("preview").src = URL.createObjectURL(newFile); //check
            
  //Sending data to server   
}

如果要保持图片的原始宽高比不拉伸，可以在图片加载完成后获取img的naturalWidth和naturalHeight，计算等比缩放后的尺寸再设置canvas大小和绘制参数。

内容的提问来源于stack exchange，提问作者Pavel Shepelenko