JavaScript Canvas : in firefox is empty

Question

我有一个问题 - bug。

在所有浏览器中，除了 ff 之外，一切都可以，但有时在 Firefox 中，特别是在大于 ~500kb 的图像上，我看到 canvas toDataUrl 返回空数据，但 base64 图像是正常的(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]);

为什么会这样？我做错了什么？怎么解决呢？如何从canvas中获取非空的canvas数据？ (我也使用 Angular )

Answer 1

您应该等待图像加载:

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