Question

我有一个问题。

在所有浏览器中，除了ff一切正常，但有时在firefox中，特别是在图像上大一点~500kb我看到画布toDataUrl返回空数据，但base64图像是normall（e。 targer.result）不是空的：

var reader = new FileReader();
reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result;
  var mainCanvas = document.createElement("canvas");
  mainCanvas.width = img.width;
  mainCanvas.height = img.height;
  var ctx = mainCanvas.getContext("2d");
  ctx.drawImage(img, 0, 0, mainCanvas.width, mainCanvas.height);
  scope.imagecontent = mainCanvas.toDataURL('image/jpeg', 100);
  if (!scope.$$phase) {
    scope.$apply();
  }
};
reader.readAsDataURL(files[0]);

为什么会这样？我做错了什么？怎么解决？如何从画布中获取非空画布数据？（我也使用角度）

Answer 1

您应该等待加载图像：

var img = new Image();
img.onload = function() {
   //do stuff here
}
img.src = e.target.result;

Javascript画布：在firefox中为空

1 个答案: