图像转换为 Base64 未显示在引导模式画布上答案

【问题标题】：Image converted to Base64 not showing on bootstrap modal's canvas图像转换为 Base64 未显示在引导模式画布上
【发布时间】：2016-10-16 03:36:58
【问题描述】：

我正在从用户那里获取图像，执行裁剪操作，将其转换为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));，图像在画布上不可见，如果是大图像，只有在我等待一段时间后再点击警报框按钮时才会呈现它。

fiddle 链接：https://jsfiddle.net/govi20/spmc7ymp/5/（注释掉alert 行以查看结果）

【问题讨论】：

标签： javascript jquery html canvas jcrop

【解决方案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 比模态加载花费的时间更少。从理论上讲，您可能能够在本地加载足够大的图像，从而无法验证卸载的图像。

然后再把 validate 和 affix 分开，这样 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();
}

【讨论】：