如何加载图像文件，每个文件都加载到自己的 canvas 元素中

Question

我尝试将图像加载到几个 canvas 元素中，但只有最后一张图像从文件列表中加载。我需要不同 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();
});

Answer 1

您需要在迭代函数中声明变量

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

如何加载图像文件，每个文件都加载到自己的 canvas 元素中

How to load image files, each into their own canvas element

javascript

jquery

canvas

drawimage

filereader