Javascript canvas：in firefox is empty

Question

我有一個問題bug。

在所有的瀏覽器，除了FF一切正常，但在Firefox有時，especcially上的圖像有點大了說〜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;