Javascript canvas:在firefox中是空的

Javascript canvas: in firefox is empty

本文关键字：firefox canvas Javascript      更新时间：2023-09-26

我有一个问题。

在所有浏览器中，除了ff所有都是可以的，但在firefox中有时，特别是在图像稍微大一点~500kb时，我看到画布toDataUrl返回我空数据，但base64图像是正常的(e.p ager .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]);

为什么会这样?我做错了什么?如何解决?如何从画布获得非空画布数据?(我也用angular)

您应该等待图像加载:

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