1

在我的扩展中，我想操作一些图像。所以我正在尝试使用画布读取他们的原始像素。问题是，如果我在 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 代码访问网页内容有关。有什么建议吗？

4

3 回答 3

2

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

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

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

于 2011-03-04T21:06:51.113 回答
1

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

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

于 2011-03-04T23:29:22.187 回答
0

我认为你应该使用

content.document.createElement()
于 2012-06-23T20:02:37.050 回答