canvas.drawImage 裁剪图像

Question

您好，我有以下图片：

尺寸为 750x554

我通过以下方式将 iamge 加载到 img 标签中：

 <input type="file" accept="image/*"
        onchange="document.getElementById('character').src = window.URL.createObjectURL(this.files[0]);">

      <img id="character" alt="your image" width="100" height="100" />

为了将此图像转换为 base64 我使用 canvas 和以下代码：

  let canvas = document.createElement("canvas");

  canvas.width = img.width
  canvas.height = img.height

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let dataURL = canvas.toDataURL("image/png");

但是我得到的结果是一个裁剪的图像，你可以在这里看到

如何解决这个问题，并获得 base64 中的图像？

谢谢。

Answer 1

您需要将 canvas 设置为图像的大小，并且在尝试绘制之前需要等待图像实际加载。

 document.querySelector('input').addEventListener('change', function() { const url = window.URL.createObjectURL(this.files[0]); const img = document.getElementById('character'); img.addEventListener('load', function() { let canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); let dataURL = canvas.toDataURL("image/png"); // show image const i = new Image(); i.src = dataURL; document.body.appendChild(i); }); img.src = url; });

 <input type="file" accept="image/*"> <img id="character" alt="your image" width="100" height="100" />

Answer 2

我认为这里的问题在于您的图像标签，因为您已将图像的宽度和高度指定为100

<img id="character" alt="your image" width="100" height="100" />

因此，只需为图像标签提供实际的高度和宽度，而不是这样。

快乐编码！