Javascript 如何使用输入标记将图像绘制到画布？

我想让图像预览使用画布，图像应该是预览后，我上传它与输入标签

我尝试过使用img标记并使用img标记为canvas创建img src，我也尝试过使用onclick函数，但这不起作用

HTML

---

您必须监听输入元素的

onChange

事件，否则您的代码只会在加载时触发，而不会再次触发

<canvas id="canvasImg"></canvas>
<input type="file" id="fileInp" onchange="readImage(this)">

我正在使用

window.URL.createObjectURL（input.files[0]）而不是您的
输入值

你可以阅读更多关于它的内容

下面是一个有效的JSFIDLE:
试试：

imgSrc = URL.createObjectURL(e.target.files[0]);

<canvas id="canvasImg"></canvas>
<input type="file" id="fileInp" onchange="readImage(this)">

function readImage(input) {
  const canvas = document.getElementById('canvasImg');
  const context = canvas.getContext("2d");
  context.clearRect(0, 0, canvas.width, canvas.height);
  let imgSrc = '';
  if (input.value !== '') {
    imgSrc = window.URL.createObjectURL(input.files[0]);
  }
  const img = new Image();
  img.onload = function() {
    context.drawImage(img, 0, 0);
  }
  img.src = imgSrc;
}

imgSrc = URL.createObjectURL(e.target.files[0]);