如何使用输入标签将图像绘制到 canvas？

Question

i want to make image preview using canvas, and image should be preview after i upload it with input tag

i have try using img tag and make img src for canvas using img tag, i also try using onclick function but that does not work

HTML

<canvas id="canvasImg"></canvas>
<input type="file" id="fileInp">

JS

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

Answer 1

You have to listen to the onChange event of the input element otherwise your code will only trigger on load and never again.

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

And then create the function:

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;
}

I'm using window.URL.createObjectURL(input.files[0]); instead of your input.value .

You can read more about it here

Here is a working jsfiddle: https://jsfiddle.net/xrqu2wfc/

Answer 2

try:

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