Изображение, преобразованное в 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 для проверки результата)


javascript canvas html jquery jcrop
person Govinda Sakhare    schedule 15.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема здесь в том, что загрузка изображения для 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();
}
person Tatarize    schedule 16.06.2016