我无法通过jcrop裁剪多个图像

Question

在上传之前，我正在尝试使用jcrop库裁剪多个图像。 我只是要裁剪一张图像，而不是全部。 此jcrop jquery库仅处理单个图像，而不处理多个图像。 这意味着我试图将模态上的所有图像都裁剪为多个图像，但是没有成功。

$(function(){

var crop_max_width2 = 700;
var crop_max_height2 = 700;
var jcrop_api2;
var canvas2;
var context2;
var image2;
var prefsize2;
var fileright;
var filecollection = new Array();

$("#files").change(function(e) {


    for (var i = 0; i < e.target.files.length; i++) {
         fileright = e.target.files[i];

        console.log(fileright);
    }

    var jcropmodal = document.getElementById('cropmodal2');
jcropmodal.style.display = "block";

     loadImage2(this);
});

    filecollection.push(fileright);


function loadImage2(fileright) {
  if (fileright.files && fileright.files[0]) {
    var reader2 = new FileReader();
    canvas2 = null;
    reader2.onload = function(e) {
      image2 = new Image();
      image2.onload = validateImage2;
      image2.src = e.target.result;
    }
    reader2.readAsDataURL(fileright.files[0]);
       console.log(reader2);
  }
}



function validateImage2() {
  if (canvas2 != null) {
    image2 = new Image();
    image2.onload = restartJcrop;
    image2.src = canvas2.toDataURL('image/png');
      console.log(image2.src);
  } else restartJcrop();
}

function restartJcrop() {
//  if (jcrop_api2 != null) {
//    jcrop_api2.destroy();
//  }

  $("#views2").empty();
  $("#views2").append("<canvas id=\"canvas2\">");
  canvas2 = $("#canvas2")[0];
  context2 = canvas2.getContext("2d");
  canvas2.width = image2.width;
  canvas2.height = image2.height;
  context2.drawImage(image2, 0, 0);
  $("#canvas2").Jcrop({
    onSelect: selectcanvas,
    onRelease: clearcanvas,
    boxWidth: crop_max_width2,
    boxHeight: crop_max_height2

  }, function() {
    jcrop_api2= this;
  });
  clearcanvas();
}

function clearcanvas() {

  prefsize = {
    x: 0,
    y: 0,
    w: canvas2.width,
    h: canvas2.height,
  };

}

function selectcanvas(coords) {
  prefsize2 = {
    x: Math.round(coords.x),
    y: Math.round(coords.y),
    w: Math.round(coords.w),
    h: Math.round(coords.h)
  };
}

function applyCrop() {
  canvas2.width = prefsize2.w;
  canvas2.height = prefsize2.h;
  context2.drawImage(image2, prefsize2.x, prefsize2.y, prefsize2.w, prefsize2.h, 0, 0, canvas2.width, canvas2.height);
  validateImage2();
}

我希望显示所有图像，以便可以在Firebase服务器上上传它们。