用canvas實作圖片濾鏡效果附示範_html5教學技巧

這是一個很有意思的特效，模擬攝影機拍攝電視螢幕畫面時出現點狀顆粒的效果。顆粒的大小透過變換矩陣實現，可以任意調節，有興趣研究的朋友可以嘗試更多的效果，代碼沒有經過優化，只是一個粗糙的Demo，大家可以自行改進。

1.取得影像資料

複製程式碼

複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製程式碼複製程式碼

複製程式碼



複製碼🎜>

img.src = 'http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg';
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();
switch (m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
pattern = [
0, 1,
0, 2,
1, 2,
1, 0>1, 0 ,
2, 0,

2, 1,
]; break; }
case1://VIDEO_TYPE.VIDEO_TRIPED:
{

pattern = [🎜>pattern = [

0, 1, 2, ]; break;

}

case2://VIDEO_TYPE.VIDEO_3X3:

{
pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
break;
}
default:
{
pattern =
[
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,
];
break;
}
}
var pattern_width = [ 2, 1, 3, 5 ];

var pattern_height = [6,height = [6, 3, 3, 15 ];

3.取得過濾資料

複製程式碼

複製程式碼

複製程式碼
複製程式碼複製程式碼複製程式碼複製程式碼複製碼程式碼如下: for ( var x = 0; x for ( var y = 0; y // Index of the pixel in the array var idx = (x y * canvasData.width) * 4; var r = canvasData.data[idx 0]; var gvar g = canvasData.data[idx 1]; var b = canvasData.data[idx 2]; var nWidth = pattern_width[m_VideoType]; var nHeight = pattern_height[m_VideoType]; = 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); // assign gray scale value canvasData.data[idx 0] = r; // Red channel canvasData.data[idx 1] = g; // Green channel canvasData.data[idx 2] = b; / / Blue channel canvasData.data[idx 3] = 255; // Alpha channel // 加上黑色的邊框if(x (canvasData. width - 8) || y > (canvasData.height - 8)) { canvasData.data[idx 0] = 0; canvasData.data[idx 1] = 0; canvasData .data[idx 2] = 0; } } } 4.寫入過濾後的資料 4.寫入過濾後的資料 複製程式碼程式碼如下: context.putImageData(canvasData, 0, 00); 🎜>5.參考資料 代震軍ImageFilter開源專案