Не могу нарисовать импортированное изображение через входной файл - PullRequest
Новая
       19

Не могу нарисовать импортированное изображение через входной файл

2 голосов
/ 16 мая 2019

Я пытаюсь загрузить изображение с HTML input type="file" и загрузить его с помощью JavaScript без успеха.

Вот мой код:

HTML: 

<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader"/>

JAVASCRIPT: 

document.getElementById('import_button').onclick = function() {
    document.getElementById('imgLoader').click();
};

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture()
{
    alert("HERE");
    var canvas  = document.querySelector('#imported');
    var context = canvas.getContext("2d"); 
    var fileinput = document.getElementById('imgLoader');
    var img = new Image();

    var file = document.getElementById('imgLoader').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(evt)
    {
        alert("THERE");
        if( evt.target.readyState == FileReader.DONE)
        {
            alert("AGAIN");
            img.src = evt.target.result;
            context.drawImage(img, 200, 200);
        }
    } 

}

Все оповещения сработали, ошибок или сообщений в консоли нет.

Как я могу загрузить его и отобразить? Спасибо!

1 Ответ

1 голос
/ 16 мая 2019

Логика (вашего исходного кода , а не отредактированной версии) немного сбивает с толку: 

document.getElementById('imgLoader').addEventListener('change', importPicture, false);

добавляет событие изменения к вводу файла.Все в порядке.Но затем в функции importPicture, которая запускается при изменении ввода файла, вы добавляете еще один прослушиватель событий изменения (через fileinput.onchange) ... почему вы это делаете?Я не вижу, как это имеет смысл.Это означает, что вы должны изменить файл еще раз, прежде чем код будет запущен.И это также означает, что каждый раз, когда вы изменяете файл, он добавляет все больше и больше слушателей, пока не будет запущено множество функций одновременно.

Другая проблема заключается в том, что вы не ожидаете загрузки данных в объект Image, прежде чем пытаться нарисовать изображение на холсте.Вам также нужно установить размеры самого холста, а не указывать размеры изображения (поскольку пользователь может загрузить что угодно, любого размера).

Вот рабочая демонстрация: 

document.getElementById('import_button').onclick = function() {
  document.getElementById('imgLoader').click();
};

var fileinput = document.getElementById('imgLoader').addEventListener('change', importPicture, false);

function importPicture() {
  var canvas = document.querySelector('#imported');
  var context = canvas.getContext("2d");
  var img = new Image();
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
    }
    img.src = evt.target.result;
  }
  reader.readAsDataURL(file);
}
<canvas class="imported" id="imported"></canvas>
<button class="import_button" id="import_button">Import a picture</button>
<input type="file" id="imgLoader" />

Кредит этот ответ за последние биты.

...