Question

我正在开发一个firefox扩展，以便我可以从扩展程序在内容文档（浏览器中加载的网页）中创建canvas元素。

我的功能如下：

function createCanvas(el, e, count)
{
    try{
    alert("create canvas");
    var x = getImgOffset(el).left;
    var y = getImgOffset(el).top;
    var body = window.content.document.getElementsByTagName('body')[0];
    //removeSelection();
    var canvas = {};
    canvas.node = window.content.document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.setAttribute('id','canvas');
    canvas.node.setAttribute('height',el.offsetHeight+'px');
    canvas.node.setAttribute('width',el.offsetWidth+'px');
    canvas.node.setAttribute('style','left:'+x+';top:'+y+';border: 1px solid grey; position:absolute; z-index:2;');
    body.appendChild(canvas.node);
    alert("d");
    canvas.node.onmouseover = function(event){ 
        var t = (event && event.target) || (event && event.srcElement); 
        //alert("d : "+t.tagName);
        initCanvas(event);
    }
    initCanvas(e);
    }catch(er)
    {
        alert("crt canvas : "+er.name+"\n"+er.message);
    }
}

当我从网页内部调用该函数时，此代码正常工作。但是，当我尝试从工具栏中调用此函数createCanvas时，它会抛出异常。

我在以下行中收到错误：

canvas.node = window.content.document.createElement('canvas');

我也尝试过以下几行：

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');

＆安培;

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');

但仍然得到同样的错误：

Error Name:  NS_ERROR_NOT_AVAILABLE
Error Message: Component is not available

请在这个问题上帮助我。

Answer 1

为什么不在overlay.xul中添加一个html：canvas元素：

    <html:canvas id="my-canvas" style="display: none;" />

然后在你的javascript中通过id引用它：

    var canvas = document.getElementById('my-canvas');

我blogged about how to use canvas elements to let browser extensions take screenshots。

如何在firefox扩展中的内容文档中创建画布？

1 个答案: