1

私の拡張機能では、いくつかの画像を操作したいと思います。そのため、キャンバスを使用して生のピクセルを読み取ろうとしています。問題は、クロムコードで実行した場合 (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 コンテンツにアクセスすることと関係があるのではないかと思います。なにか提案を？

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)が代わりに返されることを理解できませんが、その中には 、 、および({})の 3 つのメンバーがあるはずです。datawidthheight

于 2011-03-04T23:29:22.187 に答える
0

使うべきだと思います

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