キャンバスを使用して、デモンストレーションで画像フィルター効果を実現する

コメント：これは、カメラでテレビ画面を撮影するときにスポット粒子の効果をシミュレートする効果です。研究に興味がある友人は、より多くの効果を試すことができます。コードは最適化されておらず、それは単なるラフなデモです。それが好きな友達はそれを勉強することができます。

1.画像データを取得します

img.src = '';

canvas.width = img.width;

canvas.height = img.height;

var context = canvas.getContext（2d）;

Context.Drawimage（IMG、0、0）;

var canvasdata = context.getimagedata（0、0、canvas.width、canvas.height）;

2.フィルターマトリックスを設定します

var m_videotype = 0;

var pattern = new Array（）;

スイッチ（M_VIDEOTYTE）

{

case0：//video_type.video_staggered：

{

パターン= [

0、1、

0、2、

1、2、

1、0、

2、0、

21、

];

壊す;

}

case1：//video_type.video_triped：

{

パターン= [

0、

1、

2、

];

壊す;

}

case2：//video_type.video_3x3：

{

パターン=

[

0、1、2、

2、0、1、

1、2、0、

];

壊す;

}

デフォルト：

{

パターン=

[

0、1、2、0、0、

1、1、1、2、0、

0、1、2、2、2、

0、0、1、2、0、

0、1、1、1、2、

2、0、1、2、2、

0、0、0、1、2、

2、0、1、1、1、

2、2、0、1、2、

2、0、0、0、1、

1、2、0、1、1、

2、2、2、0、1、

1、2、0、0、0、

1、1、2、0、1、

1、2、2、2、0、

];

壊す;

}

}

var pattern_width = [2、1、3、5];

var pattern_height = [6、3、3、15];

3.フィルタリングされたデータを取得します

for（var x = 0; x <canvasdata.width; x ++）{

for（var y = 0; y <canvasdata.height; y ++）{

//配列内のピクセルのインデックス

var idx =（x + y * canvasdata.width） * 4;

var r = canvasdata.data [idx + 0];

var g = canvasdata.data [idx + 1];

var b = canvasdata.data [idx + 2];

var nwidth = pattern_width [m_videotye];

var nheight = pattern_height [m_videotye];

var index = nwidth *（y％nheight） +（x％nwidth）;

index = pattern [index];

if（index == 0）

var r = fclamp0255（2 * r）;

if（index == 1）

var g = fclamp0255（2 * g）;

if（index == 2）

var b = fclamp0255（2 * b）;

//グレースケール値を割り当てます

canvasdata.data [idx + 0] = r; //赤いチャネル

canvasdata.data [idx + 1] = g; //グリーンチャネル

canvasdata.data [idx + 2] = b; //青いチャネル

canvasdata.data [idx + 3] = 255; //アルファチャネル

//黒い境界線を追加します

if（x <8 || y <8 || x>（canvasdata.width -8）|| y>（canvasdata.height -8））

{

canvasdata.data [idx + 0] = 0;

canvasdata.data [idx + 1] = 0;

canvasdata.data [idx + 2] = 0;

}

}

}

4。フィルタリングされたデータを書き込みます

Context.putimagedata（canvasdata、0、0）;

5。参照資料

Dai Zhenjun ImageFilterオープンソースプロジェクト