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

您需要将画布设置为图像的大小，并且需要等待图像实际加载后才能尝试绘制它。

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" />

因此，您可以给图像标签提供实际的高度和宽度。

快乐编码!!!