Изображение, преобразованное в Base64, не отображается на загрузочном модальном холсте

Я беру изображение от пользователя, выполняя операцию обрезки, преобразуя его в base64, а затем рисуя на холсте. Для обрезки я использую библиотеку jcrop.

$(document).on("change","#photograph",function() {
   $("#picCrop").modal('show'); 
   $("#views").empty(); 

   image = null;
   canvas = null;
   alert("canvas"+(canvas==null)+" Image"+ (image==null));

   loadImage(this);
   $(this).replaceWith('<input id="photograph" type="file"    class="form-control">');
});

Здесь я столкнулся с проблемой, без alert("canvas"+(canvas==null)+" Image"+ (image==null)); изображение не видно на холсте, в случае больших изображений оно отображается только в том случае, если я подождал некоторое время, прежде чем нажать кнопку окна предупреждения.

Ссылка на скрипт: https://jsfiddle.net/govi20/spmc7ymp/5/ (закомментируйте строку alert, чтобы проверить результат)

Ответы

Ответ 1

Проблема заключается в том, что загрузка изображений для firefox обычно имеет правильный размер, прежде чем перейти к следующему шагу. И модальный должен существовать для прикрепления к холсту.

https://jsfiddle.net/a0e5dt98/

$(document).on("change", "#photograph", function() {
  $(this).replaceWith('<input id="photograph" type="file" class="form-control">');
  $("#picCrop").modal('show');
  loadImage(this);
});

$('#picCrop').on('shown.bs.modal', function(e) {
  validateImage();
})

Затем он вызывает loadImage из выбора изображения. Затем проверяет это изображение при загрузке модаля, который привяжет его к существующему div. Это предполагает, что imageLoad занимает меньше времени, чем модальная загрузка. Теоретически вы можете загрузить достаточно большое изображение на локальном уровне, чтобы он не мог проверить ненагруженное изображение.

Затем снова разделите проверку и аффикс, чтобы firefox мог правильно получить размеры.

function validateImage() {
  console.log("validateimage.")
  if (canvas != null) {
    image = new Image();
    image.onload = affixJcrop;
    image.src = canvas.toDataURL('image/png');
  } else affixJcrop();
}

function affixJcrop() {
  console.log("affixJcrop")
  if (jcrop_api != null) {
    jcrop_api.destroy();
  }
  $("#views").empty();
  $("#views").append("<canvas id=\"canvas\">");
  canvas = $("#canvas")[0];
  context = canvas.getContext("2d");
  console.log(image.width);
  console.log(image.height);
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);
  $("#canvas").Jcrop({
    onSelect: selectcanvas,
    onRelease: clearcanvas,
    boxWidth: crop_max_width,
    boxHeight: crop_max_height,
    minSize: [100, 100],
    setSelect: [0, 0, 100, 100]
  }, function() {
    jcrop_api = this;
  });
  clearcanvas();
}