Javascript canvas.drawImage裁剪图像

您好，我有以下图片：

尺寸为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中的图像

---

谢谢。

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

document.querySelector（'input'）.addEventListener（'change'，function（）{
const url=window.url.createObjectURL（this.files[0]）；
常量img=document.getElementById（'character'）；
img.addEventListener（'load'，function（）{
让canvas=document.createElement（“canvas”）；
canvas.width=img.naturalWidth；
canvas.height=img.naturalHeight；
设ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
让dataURL=canvas.toDataURL（“image/png”）；
//显示图像
常数i=新图像（）；
i、 src=dataURL；
文件.正文.附件（一）；
});
img.src=url；
});
我认为这里的问题在于图像标签，因为您已将图像的宽度和高度指定为100


因此，只需给出图像标记的实际高度和宽度即可

快乐编码
 这不起作用，我用代码和结果更新了答案。这不是问题，如果我退出大小属性，我会得到相同的错误
  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");