用canvas實(shí)現(xiàn)圖片濾鏡效果附演示

    這是一個(gè)很有意思的特效，模擬攝像機(jī)拍攝電視屏幕畫面時(shí)出現(xiàn)點(diǎn)狀顆粒的效果。顆粒的大小通過變換矩陣實(shí)現(xiàn)，可以任意調(diào)節(jié)，有興趣研究的朋友可以嘗試更多的效果，代碼沒有經(jīng)過優(yōu)化，只是一個(gè)粗糙的Demo，大家可以自行改進(jìn)。
    1.獲取圖像數(shù)據(jù)
    代碼如下:
    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.設(shè)置過濾矩陣
    代碼如下:
    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,
    2, 0,
    2, 1,
    ];
    break;
    }
    case1://VIDEO_TYPE.VIDEO_TRIPED:
    {
    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, 3, 3, 15 ];
    3.獲取過濾數(shù)據(jù)
    代碼如下:
    for ( var x = 0; x < canvasData.width; x++) {
    for ( var y = 0; y < canvasData.height; y++) {
    // Index of the pixel in the array
    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_VideoType];
    var nHeight = pattern_height[m_VideoType];
    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);
    // 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 < 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.寫入過濾后的數(shù)據(jù)
    代碼如下:
    context.putImageData(canvasData, 0, 0);