Как загрузить файлы изображений, каждый в свой элемент canvas - PullRequest
Новая
       25

Как загрузить файлы изображений, каждый в свой элемент canvas

0 голосов
/ 01 июля 2018

Я пытался загрузить изображения в несколько элементов canvas, но из списка файлов было загружено только последнее изображение. Мне нужны разные изображения в разных элементах холста, каждый по-своему. Спасибо за помощь.

HTML 

<input type='file' id='imgfile' multiple />

Элемент canvas будет создан jQuery.

JavaScript 

function loadImage(picture) {
  var canvas = document.querySelectorAll('canvas');
  var input, fr, file, img;
  input = document.getElementById('imgfile');

  $.each(canvas, function(i, v) {
    file = input.files[i];
    fr = new FileReader();
    fr.onload = function createImage() {
      img = new Image();
      img.onload = function imageLoaded() {
        var ctx = canvas[i].getContext("2d");
        ctx.drawImage(img, 0, 0, 50, 50);
      }
      img.src = fr.result;
    }
    fr.readAsDataURL(file);
  });
}

$("input").change(function() {
  var picture = this.files;
  var leng = picture.length;
  for (var i = 0; i < picture.length; i++) {
    $("input").after('<canvas width="50" height="50" style="border:1px solid red"></canvas>');
  }
  loadImage();
});

1 Ответ

0 голосов
/ 01 июля 2018

Вам нужно объявить переменные внутри функции iteratee 

function loadImage(picture) {
    var canvas = document.querySelectorAll('canvas');
    var input = document.getElementById('imgfile');

    $.each( canvas, function( i, v) {
        var file = input.files[i]; 
        var fr = new FileReader(); // file reader per file
        fr.onload = function createImage() {
          var img = new Image(); // image per file
          img.onload = function imageLoaded() {
              var ctx = canvas[i].getContext("2d");
              ctx.drawImage(img,0,0, 50, 50);
          }
          img.src = fr.result;
        }
        fr.readAsDataURL(file);
    }); 
}
...