ホームページ ウェブフロントエンド jsチュートリアル Javascript画像処理のアイデアと実装コード_JavaScriptスキル

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 です。
画像データを行列に変換するメソッド




コードをコピー
コードは次のとおりです。 関数 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
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

画像処理タスクでワッサーシュタイン距離はどのように使用されますか? 画像処理タスクでワッサーシュタイン距離はどのように使用されますか? Jan 23, 2024 am 10:39 AM

画像処理タスクでワッサーシュタイン距離はどのように使用されますか?

ビジョントランスフォーマー(VIT)モデルの動作原理と特性の詳細な分析 ビジョントランスフォーマー(VIT)モデルの動作原理と特性の詳細な分析 Jan 23, 2024 am 08:30 AM

ビジョントランスフォーマー(VIT)モデルの動作原理と特性の詳細な分析

AI テクノロジーを使用して古い写真を復元する方法 (例とコード分析付き) AI テクノロジーを使用して古い写真を復元する方法 (例とコード分析付き) Jan 24, 2024 pm 09:57 PM

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

Java 開発: 画像認識と処理を実装する方法 Java 開発: 画像認識と処理を実装する方法 Sep 21, 2023 am 08:39 AM

Java 開発: 画像認識と処理を実装する方法

画像超解像再構成におけるAI技術の応用 画像超解像再構成におけるAI技術の応用 Jan 23, 2024 am 08:06 AM

画像超解像再構成におけるAI技術の応用

PHP学習メモ:顔認識と画像処理 PHP学習メモ:顔認識と画像処理 Oct 08, 2023 am 11:33 AM

PHP学習メモ:顔認識と画像処理

スケール不変特徴量 (SIFT) アルゴリズム スケール不変特徴量 (SIFT) アルゴリズム Jan 22, 2024 pm 05:09 PM

スケール不変特徴量 (SIFT) アルゴリズム

C# 開発における画像処理とグラフィカル インターフェイスの設計の問題に対処する方法 C# 開発における画像処理とグラフィカル インターフェイスの設計の問題に対処する方法 Oct 08, 2023 pm 07:06 PM

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

See all articles