Question

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

我认为你应该使用

content.document.createElement()

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

3 个答案: