Javascript画像処理のアイデアと実装コード_JavaScriptスキル
May 16, 2016 pm 05:45 PM
画像処理
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 です。
画像データを行列に変換するメソッド
コードをコピー
コードをコピー
iCtx メソッドと iResize メソッドは、他の関数と共有できます:
コードをコピーします
では、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);
例
コードをコピーします
コードは次のとおりです
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 つのチャネルを持つものとして説明されます。
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 オブジェクトをすぐに返すことができないため、この関数は次のように使用する必要があります:
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);
例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まで。
を参照してください: RGBA からグレー: Y グレーから RGBA: R RGBA から GRAY への対応するマッピング関係 (チャネルが 4 つあることを意味します) は次のようになると結論付けることができます:
RGBA から RGBA(GRAY) : R1 = G1 = B1
行列を画像データに変換するメソッド
処理された行列は 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 ドキュメントの変換式 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
}
を参照してください: RGBA からグレー: Y グレーから RGBA: R RGBA から GRAY への対応するマッピング関係 (チャネルが 4 つあることを意味します) は次のようになると結論付けることができます:
RGBA から RGBA(GRAY) : R1 = G1 = B1
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7303
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1207
29



AI テクノロジーを使用して古い写真を復元する方法 (例とコード分析付き)

C# 開発における画像処理とグラフィカル インターフェイスの設計の問題に対処する方法
