4

html5/js の例を使用して任意の画像を 2D マトリックスに変換するソリューションはありますか

picture.jpg -------be Converted to -----> matrice[W][H] of pixels
4

2 に答える 2

7

他の人が指摘したように、キャンバス要素を使用してこれを行うことができます。この手法は、ページと同じドメインでホストされている画像に対してのみ機能することを除いて、JSFiddle を投稿します (画像がクロスオリジン対応でない限り)...そして、JSFiddle は例で使用する適切な画像をホストしていないようです. これをテストするために使用したコードは次のとおりです。

// Get a reference to the image you want the pixels of and its dimensions
var myImage = document.getElementById('theImageToWorkWith');
var w = myImage.width, h = myImage.height;

// Create a Canvas element
var canvas = document.createElement('canvas');

// Size the canvas to the element
canvas.width = w;
canvas.height = h;

// Draw image onto the canvas
var ctx = canvas.getContext('2d');
ctx.drawImage(myImage, 0, 0);

// Finally, get the image data
// ('data' is an array of RGBA pixel values for each pixel)
var data = ctx.getImageData(0, 0, w, h);

詳細については、キャンバスのピクセル操作を参照してください。関心のあるブラウザーでcanvas タグがサポートされていることを確認することもできます。

于 2013-02-16T14:11:55.607 に答える
2

残念ながら、説明が難しい理由により、画像がJavascriptのダウンロード元と同じサーバーからのものでない限り、Javascriptコードは画像のピクセルを読み取ることができません。

これは、画像が公開されていて、インターネット全体がクレデンシャルを提供せずに画像をダウンロードできる場合でも...全世界がダウンロードできますが、セキュリティ上の理由からページはダウンロードできません（！）。この制限を回避するための1つのトリックは、ユーザーに代わってイメージを取得するサーバー側の部分を作成することです。

画像が読み取りを許可されている場合は、キャンバスを作成し、その上に画像を描画してから、ピクセルを読み取ることができます。

var c = document.createElement("canvas");
c.width = img.width;
c.height = img.height;
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);
var idata = c.getImageData(0, 0, img.width, img.height);
//
// here idata.data[(y*img.width + x)*4] is the red value
// of pixel (x, y), followed by green, blue and alpha
//
于 2013-02-16T13:47:30.413 に答える