Firefox無法使用數據uri在畫布上繪製圖像：NS_ERROR_NOT_AVAILABLE

Question

我有一個SVG數據uri成功呈現到頁面中的img元素。在Chrome中，使用drawImage將圖像繪製到畫布上效果很好，但在FireFox中，我獲得了NS_ERROR_NOT_AVAILABLE。

這是一個可在Chrome瀏覽器中使用但不是Firefox的小提琴。點擊按鈕觸發複製。

http://jsfiddle.net/YbA39/181/

是否有任何變通辦法或其他方式來說服火狐得出這樣的形象呢？

Answer 1

遺憾的是，答案似乎是，這是目前在Firefox中的錯誤，特別是涉及到SVG的：https://bugzilla.mozilla.org/show_bug.cgi?id=700533

Firefox的自己的文件說，它應該工作：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawImage()

Answer 2

添加try catch

try { 
    ctx.drawImage(blah, 0, 0, 200, 200); 
     } catch(err) {} 

這下面的鏈接說這有一個解決方法。

http://www.jason-palmer.com/2009/03/mooflow-firefox-uncaught-exception-fix/

Answer 3

，我想這裏的問題，是當資源可用？，但有一種方法，以確認該資源可用，只是檢查圖像對象的「完整的」屬性。

if (img.complete == true){ 
    // is available. 
} else { 
    // wait until is ready. 
} 

此外，您可以使用onload事件和檢查兩個東西的延遲方法進行合併方法。

var img = new Image(); 
//first attach handler 
img.onload = function(e){ 
    if (e.target.complete == true) { 
      yourHandler(e); 
     } else {    
      var maxTimes = 10; 
      var countTimes = 0; 
      function retryLoadImage() { 
       setTimeout(function() { 
        if (countTimes > maxTimes) { 
         // -- cannot load image. 
         return; 
        } else { 
         if (e.target.complete == true) { 
          yourHandler(e); 
         } else { 
          retryLoadImage(); 
         } 
        } 
        countTimes++; 
       }, 50); 
      }; 
     } 
}; 
img.src = yourSource; 

這對我有用!!!在IE和FF上。