Question

我已经成功将SVG数据uri渲染到我页面中的img元素。在Chrome中，使用drawImage将图像绘制到画布上效果很好，但在FireFox中，我得到了NS_ERROR_NOT_AVAILABLE。

这是一个适用于Chrome但不适用于Firefox的小提琴。单击按钮以触发复制。

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

是否有任何变通方法或其他方法来说服firefox绘制此图像？

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

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

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

Answer 3

添加try catch

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

下面的链接说明了这方面的解决方法。

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

Firefox无法将带有数据uri的图像绘制到画布上：NS_ERROR_NOT_AVAILABLE

3 个答案: