Кадрирование изображений один за другим не работает

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/