キャンバスを使用して、demoment_html5 チュートリアルのスキルで画像フィルター効果を実現します

これは非常に興味深い特殊効果で、カメラがテレビ画面をキャプチャしたときに現れる点のような粒子状の効果をシミュレートします。パーティクルのサイズは変換マトリックスによって実現され、研究に興味のある友人はさらに多くの効果を試すことができます。コードはまだ最適化されていないため、自分で改良することができます。

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

コードをコピーします

コードは次のとおりです

img.src = 'http://bloglaotou.duapp.com/wp-content/主題/frontopen2/tools/filter/image2.jpg'; img.width ;
canvas.height = img.height;
var context = Canvas.getContext("2d");
var CanvasData = context.getImageData (0, 0, Canvas.width, Canvas.height);

2. フィルター行列を設定します

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

var m_VideoType=0; var pattern=new Array(); >switch (m_VideoType)

{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
パターン = [
0, 1,
0, 2,
1, 2 、
1, 0 ,
2, 0,
2, 1,
];
ブレーク;
}
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; CanvasData.height; y ) { // 配列内のピクセルのインデックス var idx = (x y * CanvasData.width) * 4; .data[idx 0];

var g = CanvasData.data[idx 2];

var nWidth = pattern_width[m_VideoType]; nHeight = pattern_height[m_VideoType];

var インデックス = nWidth * (y % nHeight) (x % nWidth);
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))
{
canvasData.data[idx 0] = 0; CanvasData.data[idx 1] = 0;
canvasData.data[idx 2] = 0;
}
}
}



4.フィルタリングされたデータ






コードをコピー


コードは次のとおりです:

コンテキスト.putImageData(canvasData, 0, 0 );

5. 参考資料

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