これは非常に興味深い特殊効果で、カメラがテレビ画面をキャプチャしたときに現れる点のような粒子状の効果をシミュレートします。パーティクルのサイズは変換マトリックスによって実現され、研究に興味のある友人はさらに多くの効果を試すことができます。コードはまだ最適化されていないため、自分で改良することができます。
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. フィルタリングされたデータを取得します
コードをコピーします コードは次のとおりです: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 );