Javascript画像処理のアイデアと実装コード_JavaScriptスキル

Idea
HTML5 キャンバスには、キャンバス内のデータを取得するための getImageData インターフェイスが用意されているため、最初にdrawImage インターフェイスを使用してキャンバス上に画像を描画し、次に getImageData を通じて画像データ マトリックスを取得できます。

IE9 はキャンバス インターフェイスのサポートを開始しますが、その getImageData によって取得されたデータは標準の TypedArray メソッドに格納されず、IE9 は WebGL ネイティブ バイナリ データのサポートを提供しないことに注意してください。 IE9 でサポートされているため、次の行列を配列モードで保存する必要があります。オープン ソース プロジェクトの Explorercanvas は、IE9 より前のバージョン (IE8 など) のキャンバス サポートを提供しますが、残念ながら、G_vmlCanvasManager はビットマップ データ取得インターフェイスを提供しません。 TypedArray の関連内容については、HTML5 の新しい配列

基本行列
画像処理において行列の計算は非常に重要なので、最初に行列モデルを構築します。
getImageData インターフェースを通じて取得された ImageData は行列のような構造をしていますが、その構造は不変であり、拡張には適していないため、JavaScript で独自に行列を構築することにしました。

コードをコピー コードは次のとおりです。

function Mat(__row, __col, __data, __buffer){
this.row = __col 0;
this.buffer = __buffer || * __col * 4);
this.data = new Uint8ClampedArray(this.buffer);
this.bytes = 1; = "CV_RGBA ";
}


row - 行列の行数を表します
col - 行列の列数を表します
channel - 行列の数を表しますRGBA 色空間は、レッド (赤)、グリーン (緑)、ブルー (青)、およびアルファ (不透明度) の 4 つのチャネルを持つものとして説明されます。

buffer - データによって使用される ArrayBuffer 参照。
data - 画像の Uint8ClampedArray 配列データ。
bytes - 各データ単位はバイトを占有します。これは uint8 データ型であるため、占有バイト数は 1 です。
type - データ型は CV_RGBA です。
画像データを行列に変換するメソッド




コードをコピー

コードは次のとおりです。 関数 imread (__image){ var width = __image.width,

height = __image.height;

iResize(width, height);
iCtx.drawImage(__image, 0, 0);
var imageData = iCtx.getImageData(0, 0, width, height),
tempMat = new Mat(height, width, imageData.data);
imageData = null; 0, 0 , width, height);
return tempMat;
}



注: ここでの __image は、文字列 URL ではなく、Image オブジェクトを指します。ブラウザでの画像の読み取りは非同期プロセスであり、対応する Mat オブジェクトをすぐに返すことができないため、この関数は次のように使用する必要があります:

コードをコピー

コードは次のとおりです: var img = new Image(); img.onload = function(){ var myMat = cv.imread(img); };

img.src = "1.jpg";

iCtx メソッドと iResize メソッドは、他の関数と共有できます:

コードをコピーします

コードは次のとおりです: var iCanvas = document.createElement("canvas"), iCtx = iCanvas.getContext( "2d"); 関数 iResize(__width, __height){ iCanvas.width = __width;

では、drawImage メソッド
を見てみましょう。
目的
キャンバス上に画像を描画します。
構文
context.drawImage(img,x,y);

context.drawImage(img,x,y,width,height); ,sheight,x,y,width,height);
例getImageData メソッドもあります: 目的
キャンバス内の画像データを取得します。
データは RGBA 色空間で返されます。
R - 赤のチャネル サイズ
G - 緑のチャネル サイズ
B - 青のチャネル サイズ
A - 不透明度のサイズ
構文
context.getImageData(x,y,width,height);
例




コードをコピーします


コードは次のとおりです

赤 = imgData.data[0]; 青 = imgData.data[2]; .data [3];
行列を画像データに変換するメソッド
処理された行列は ImageData になるメソッドが必要で、putImageData メソッドを通じて処理された画像をキャンバス上に描画できます。

コードをコピーします コードは次のとおりです:

function RGBA2ImageData(__imgMat){
var width = __imgMat.col,
height = __imgMat.row,
imageData = iCtx.createImageData(width, height);
imageData.data.set(__imgMat.data);
}

putImageData メソッド を見てみましょう: 目的
画像データを通じてキャンバスに画像を描画します。
構文
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
カラー画像をグレースケール画像に変換します
最後に、単純な色空間変換を実行します。 RGBAからGRAYまで。

コードをコピーします コードは次のとおりです。

function cvtColor(__src){
if(__src .type && __src.type === "CV_RGBA"){
var row = __src.row,
col = __src.col
var dst = new Mat(row,col);
データ = dst.data,
data2 = __src.data;
var pix1, pix2, pix = __src.row * __src.col * 4;
while (pix){
data; [pix - = 4] = データ[pix1 = pix 1] = データ[pix2 = pix 2] = (data2[pix] * 299 data2[pix1] * 587 data2[pix2] * 114) / 1000; [pix 3 ] = data2[pix 3];
}
}else{
return
}
return
}

OpenCV ドキュメントの変換式
を参照してください: RGBA からグレー: Y グレーから RGBA: R RGBA から GRAY への対応するマッピング関係 (チャネルが 4 つあることを意味します) は次のようになると結論付けることができます:
RGBA から RGBA(GRAY) : R1 = G1 = B1