3

特に自分のページ用にグリースモンキーのJavaScriptコードを書き込もうとしています。このページには、ID「barcode」の img があります。

使うことができます

var imageattributes = document.getElementById('barcode');

ページから画像を取得します。私が欲しいのは、この画像のすべてのピクセルを配列で取得できるようにしたいということです。

私はstackoverflowを回っていて、これを行ういくつかの方法を見てきました。ピクスタも見ました。stackoverflow のソリューションに関する私の問題は、

var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

動作しません。私が何をしようと。また、pixastic は、どこでもピクセル情報を表示する方法を示していません。彼らのドキュメントは、反転、ぼかしなどのためにすでに持っている機能のみをカバーしています.

私が現在持っているコードはこれです：

var imageattributes = document.getElementById('barcode').attributes;
var imageurl = imageattributes.getNamedItem("src").value;
var imageurl2 = imageurl.replace("..","http://localhost");

var img = new Image();
img.src = imageurl2;
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
    pixel[i] = new Array();
    for(j=0;j<canvas.width;j++){
        pixel[i][j] = imgData.data[i*canvas.width+j*4];
    }
}
document.getElementById('derp').innerHTML = imageurl;

これは、画像を取得し、src を取得し、それを新しい画像としてロードし、ピクセルを配列内に配置することになっています。最後の行は、コードが機能したかどうかを画面に表示するためのものです。したがって、URL が出力された場合は機能したことを意味し、機能していない場合は機能していないことを意味します。

誰でもこれで私を助けてもらえますか? ありがとうございました。

4

1 に答える 1

1

要素を持っていない (または使用していない) <canvas>。HTML は次のようになります。

<img id="barcode" src="whatever.bmp">
<canvas id="mycanvas">
    <div id="fallback">
        You only see this message if your browser doesn't support canvas.
    </div>
<canvas>

また、関数には次のプレフィックスを付ける必要があります。

var context = document.getElementById('mycanvas').getContext('2d');

これにより、コードが適切に機能するはずです。最初に要素の描画コンテキストを取得し<canvas>、次にそのコンテキストに画像を追加し、最後にコンテキストからピクセル データを取得する必要があります。

上記のコメントに直接対処するには、次の行

var context = document.getElementById('barcode').getContext('2d');

画像要素のコンテキストを取得しようとしますが、それは不可能です。getContextキャンバス要素でのみ呼び出すことができます。

于 2012-06-01T22:52:28.350 に答える