在 Firefox 扩展中操作 <canvas> 图像数据答案

【问题标题】：Manipulating <canvas> image data in Firefox extension在 Firefox 扩展中操作 <canvas> 图像数据
【发布时间】：2011-03-04 18:23:41
【问题描述】：

在我的扩展程序中，我想处理一些图像。所以我正在尝试使用画布读取他们的原始像素。问题是，如果我在 chrome 代码中执行（img 是内容文档中的图像）：

var src = document.createElement("canvas");
src.width = img.naturalWidth;
src.height = img.naturalHeight;
var srcCtx = src.getContext("2d");

在最后一行它说getContext 不是一个函数。另一方面，如果我运行（注意第一行不同！）：

var src = img.ownerDocument.createElement("canvas");
src.width = img.naturalWidth;
src.height = img.naturalHeight;
var srcCtx = src.getContext("2d");
srcCtx.drawImage(img, 0, 0);
var src_data = srcCtx.getImageData(0, 0, src.width, src.height);

没有返回错误，但src_data 显示为空。我想这可能与从 chrome 代码访问网页内容有关。有什么建议吗？

【问题讨论】：

没关系，我在代码的其他地方发现了问题。
当您自己发现问题时，最好将其发布为您自己问题的答案，以造福他人。

标签： javascript firefox canvas firefox-addon thunderbird-addon

【解决方案1】：

我怀疑第一个sn-p 的问题在于document 是一个XUL 文档，所以它的createElement 函数将创建一个XUL 元素并且没有XUL:canvas 这样的东西。可以在 XUL 文档中创建 HTML 元素，但是您需要使用 createElementNS()。为了更清楚，代码看起来像

document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

为什么src_data 出来是空的，我不知道。

【讨论】：

你能告诉我我们可以用哪个NameSpace从firefox扩展中创建一个canvas元素。当我尝试使用document.createElement("canvas"); NS_ERROR_NOT_AVAILABLE Component is not available 创建canvas 时，我遇到了很多困难并收到以下错误。
Canvas 是一个 HTML 元素，因此您需要 HTML（或 XHTML）命名空间，http://www.w3.org/1999/xhtml

【解决方案2】：

正如我上面所说，问题出在另一段代码中。

实际上是因为我误读了文档并认为src_data 应该包含像素，而它应该是src_data.data。由于某种原因，我无法理解打印出uneval(src_data) 会返回({})，而其中应该有三个成员，data、width 和height。

【讨论】：

【解决方案3】：

我认为你应该使用

content.document.createElement()

【讨论】：