javascript - 图像转换为 Base64 未显示在引导模式 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 链接: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 比模态加载花费的时间更少。理论上，您可能能够在本地加载足够大的图像，以至于它无法验证卸载的图像。

然后再把validate和affix分开，这样firefox就可以正确的获取sizes了。

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();
}