转换为Base64的图像不显示在bootstrap modal的画布上 [英] Image converted to Base64 not showing on bootstrap modal's canvas

问题描述

我从用户处获取图片，执行裁剪操作，将其转换为 base64 ，然后在画布上绘制。对于裁剪我使用 jcrop 库。

I am taking the Image from user,performing the crop operation, converting it to base64 and then drawing it on a canvas. For the cropping I am using jcrop library.

$(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 == null）+Image+（image == null））; 图像在画布上不可见，在大图像的情况下，只有等待一段时间点击提醒框按钮。

Here I am facing the issue, without alert("canvas"+(canvas==null)+" Image"+ (image==null)); the image is not visible on canvas, in case of large images it is getting rendered only if I wait for some time before hitting the alert box button.

小提示链接： https://jsfiddle.net/govi20/spmc7ymp/5/ （注释掉 alert 行以检查结果）

fiddle link: https://jsfiddle.net/govi20/spmc7ymp/5/ (comment out the alert line to check the result)

推荐答案

这里的问题是，用于firefox的图像加载在进入下一步之前通常已经具有正确的大小。

The problem here is that the image loading for firefox needs typically have the correct size already before moving on to the next step. And the modal needs to exist for the canvas to be attached to that.

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

Then it calls loadImage from the selection of the image. Then validates that image on the loading of the modal which will affix it to the now existing div. This does assume that the imageLoad takes less time than the modal loading. In theory you might be able to load a large enough image locally that it can't validate the unloaded image.

然后再次分割验证和粘贴， firefox可以正确获取大小。

Then dividing up the validate and the affix again, so that firefox can get the sizes correctly.

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 modal的画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！