Question

我试图将图像加载到几个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

您需要在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);
    }); 
}

如何将图像文件加载到各自的画布元素中

1 个答案: