FireFox：圖像base64數據使用畫布對象不工作

Question

這是我寫的代碼來調整圖像的高寬比，它在Chrome瀏覽器上工作，但不顯示在Firefox上，有誰知道什麼是錯的。

var image = new Image(); 

     image.src = data; 

     //$(image).load(function() { 

      var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')), 
           parseFloat($(image).prop('naturalHeight')), 
           dstWidth, 
           dstHeight); 

      var canvas = document.createElement('canvas'); 
      canvas.width = dstWidth; 
      canvas.height = dstHeight; 

      var x = (dstWidth - aspectRatio[0])/2; 
      var y = (dstHeight - aspectRatio[1])/2; 
      var ctx = canvas.getContext("2d"); 
       ctx.drawImage(image, x, y, aspectRatio[0], aspectRatio[1]); 

      return canvas.toDataURL("image/png"); 

這工作，它由canvas.toDataURL

數據生成：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAQEAAADACAYAAAAEL9ZYAAAA1klEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwYD7QAB/UrDfgAAAABJRU5ErkJggg ==

Answer 1

要使其工作，您需要處理圖像加載的異步性質。你將不得不在這裏使用回調機制。它在Chrome中「工作」的原因是偶然的;也就是說，當您嘗試和/或瀏覽器能夠在drawImage調用中使用圖像之前傳遞未壓縮/已解碼的圖像時，圖像碰巧存在於緩存中。

這時候它的網上對於大多數用戶，以便妥善處理加載，你可以做很可能會無法正常工作 -

例子：

function getImageUri(url, callback) { 

    var image = new Image(); 
    image.onload = function() { // handle onload 

     var image = this; // make sure we using valid image 

     var aspectRatio = getAspectRatio(parseFloat($(image).prop('naturalWidth')), 
     parseFloat($(image).prop('naturalHeight')), 
     dstWidth, 
     dstHeight); 

     var canvas = document.createElement('canvas'); 
     canvas.width = dstWidth; 
     canvas.height = dstHeight; 

     var x = (dstWidth - aspectRatio[0])/2; 
     var y = (dstHeight - aspectRatio[1])/2; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, x, y, aspectRatio[0], aspectRatio[1]); 

     // use callback to provide the finished data-uri 
     callback(canvas.toDataURL()); 
    } 
    image.src = url; // set src last 
} 

然後使用這種方式：

getImageUri(myURL, function (uri) { 
    console.log(uri); // contains the image as data-uri 
});