Firefox无法使用数据uri在画布上绘制图像：NS_ERROR_NOT_AVAILABLE

我有一个SVG数据uri成功呈现到页面中的img元素。在Chrome中，使用drawImage将图像绘制到画布上效果很好，但在FireFox中，我获得了NS_ERROR_NOT_AVAILABLE。Firefox无法使用数据uri在画布上绘制图像：NS_ERROR_NOT_AVAILABLE

这是一个可在Chrome浏览器中使用但不是Firefox的小提琴。点击按钮触发复制。

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

是否有任何变通办法或其他方式来说服火狐得出这样的形象呢？

来源

2014-10-02 Riley Lark

遗憾的是，答案似乎是，这是目前在Firefox中的错误，特别是涉及到SVG的：https://bugzilla.mozilla.org/show_bug.cgi?id=700533

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

来源

2014-10-02 19:26:47

-1

添加try catch

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

这下面的链接说这有一个解决方法。

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

来源

2014-10-02 19:46:08

此解决方案只会使错误无效。根据您提供的链接：“注意：这个”修复“将禁用Firefox中的[功能]。” – 2014-10-03 17:25:56

，我想这里的问题，是当资源可用？，但有一种方法，以确认该资源可用，只是检查图像对象的“完整的”属性。

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上。

来源

2015-03-03 18:19:38 sendler

Firefox无法使用数据uri在画布上绘制图像：NS_ERROR_NOT_AVAILABLE

回答

相关问题