转换为 Base64 的图像未显示在 bootstrap 模态 canvas 上

Question

我正在从用户那里获取图像，执行裁剪操作，将其转换为 base64，然后在 canvas 上绘制。对于裁剪，我正在使用 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));，图像在 canvas 上不可见，如果是大图像，只有在我等待一段时间后才会出现渲染框按钮。

fiddle link: https://jsfiddle.net/govi20/spmc7ymp/5/ （注释掉 alert 行以检查结果）

Answer 1

这里的问题是 firefox 的图像加载通常需要在继续下一步之前已经具有正确的大小。并且模态需要存在才能附加到 canvas。

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 比模态加载花费的时间更少。理论上，您可以在本地加载足够大的图像，但它无法验证卸载的图像。

然后div重新整理验证和词缀，以便 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();
}

转换为 Base64 的图像未显示在 bootstrap 模态 canvas 上

Image converted to Base64 not showing on bootstrap modal's canvas

html

javascript

jquery

canvas

jcrop