Как нарисовать изображение на холсте, используя тег ввода?

Question

Я хочу сделать предварительный просмотр изображения с использованием canvas, а изображение должно быть предварительным просмотром после того, как я загрузил его с тегом ввода

Я попытался использовать тег img и сделать img src для canvas, используя тег img, я также попробую использоватьфункция onclick, но это не работает

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

попробуй:

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

Answer 2

Вы должны прослушать событие onChange элемента ввода, иначе ваш код будет срабатывать только при загрузке и никогда больше.

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

Я использую window.URL.createObjectURL(input.files[0]); вместо вашего input.value.

Подробнее об этом вы можете прочитать здесь

Вот рабочий jsfiddle: https://jsfiddle.net/xrqu2wfc/