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

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);

{
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 * (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.フィルタリングされたデータ






コードをコピー


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