用农作物一张一张地裁剪图像不起作用

Question

我在使用Cropper.js裁剪多个图像时遇到问题

每当我想使用toDataURL传递输出数据时，都会在图像中显示如下错误

我的代码是：

<script type="text/javascript">
$(document).ready(function () {
  var img_temp = $('#img_temp')[0];
  var img_photo = $('#img_photo')[0];
  var img_address_proof = $('#img_address_proof')[0];

  var input_address_proof = $('#input_address_proof');
  var img_type="";
  var $modal = $('#modal');
  var cropper;

函数声明

  /*Function For Reading File*/
  function reader(files,done)
  {
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
      file = files[0];

      if (URL) {
        done(URL.createObjectURL(file));
      } else if (FileReader) {
        reader = new FileReader();
        reader.onload = function (e) {
          done(reader.result);
        };
        reader.readAsDataURL(file);
      }
    }    
  }

/* Function for Performing Modal Operations*/
function modal()
{
    $modal.on('shown.bs.modal', function () {
    cropper = new Cropper(img_temp, {
        aspectRatio: null,
        minCropBoxHeight: 192,
        minCropBoxWidth: 147,
        viewMode: 3,
    });
  }).on('hidden.bs.modal', function (cropper) {
    cropper.destroy();  //Cropper Undefined
    cropper = null;
  });

}

function crop()
{
    $('#crop_photo').on('click', function () {
    var initialImageURL;
    var canvas,img_name,w,h;

    $modal.modal('hide');

    if(img_type=="photo")
    {
        w=147;
        h=192;
        img_name=img_photo;
    }

    if(img_type=="address_proof")
    {
        w=400;
        h=400;
        img_name=img_address_proof;
    }

    if (cropper) {
      canvas = cropper.getCroppedCanvas({
          width: w,
          height: h
      });
      initialImageURL = img_temp.src;
      img_name.src = canvas.toDataURL();  //Here the Canvas Undefined
      img_temp.src='';
    }
});
}

函数调用

    $('#input_photo').on('change', function (e) {
    img_type="photo";
    var files = e.target.files;
    var done = function (url) {
      input_photo.val('')
      img_temp.src = url;
      $modal.modal('show');
    };

    reader(files,done);

  });

    modal();
    crop();

    $('#input_address_proof').on('change', function (e) {
      img_type="address_proof";
    var files = e.target.files;
    var done = function (url) {
      input_photo.val('')
      img_temp.src = url;
      $modal.modal('show');
    };

    reader(files,done);

  });

    modal();
    crop();
</script>

我尝试过将相同的代码直接放置在没有功能的情况下。但是它仍然有相同的错误。

错误是：

如何解决这些错误以上传多张图片？

尝试此代码： http://jsfiddle.net/h0p1o87z/