陈建华的博客
专注web开发
纯JavaScript实现HTML5 Canvas六种特效滤镜
2016-03-01 17:25:13   阅读837次

纯JavaScript实现HTML5 Canvas六种特效滤镜 

小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯

JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为:

  1. 反色

  2. 灰色调

  3. 模糊

  4. 浮雕

  5. 雕刻

  6. 镜像

滤镜原理解释:

1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b)

2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为

    newr = (r * 0.272) + (g * 0.534) + (b * 0.131);

    newg = (r * 0.349) + (g * 0.686) + (b * 0.168);

    newb = (r * 0.393) + (g * 0.769) + (b * 0.189);

3.模糊:基于一个5*5的卷积核

4.浮雕与雕刻:

  基于当前像素的前一个像素RGB值与它的后一个像素的RGB值之差再加上128

5.镜像:模拟了物体在镜子中与之对应的效果。

杂项准备

1.如何获取Canvas 2d context对象

var canvas = document.getElementById("target");
canvas.width = source.clientWidth;
canvas.height = source.clientHeight;
if(!canvas.getContext) {
    console.log("Canvas not supported. Please install a HTML5compatible browser.");
    return;
}
// get 2D context of canvas and draw image
tempContext = canvas.getContext("2d");


2. 如何绘制一个DOM img对象到Canvas对象中

var source = document.getElementById("source");
tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);

3. 如何从Canvas对象中获取像素数据

var canvas = document.getElementById("target");
varlen = canvas.width * canvas.height * 4;
var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData = canvasData.data;

4. 如何对DOM对象实现鼠标Click事件绑定

function bindButtonEvent(element, type, handler){ 
    if(element.addEventListener){ 
       element.addEventListener(type, handler,false); 
    }else { 
       element.attachEvent('on'+type, handler);// for IE6,7,8
    } 
}

5. 如何调用实现的gfilter API完成滤镜功能

<scriptsrc="gloomyfishfilter.js"></script> //导入API文件
gfilter.colorInvertProcess(binaryData, len); //调用 API


6. 浏览器支持:IE, FF, Chrome上测试通过,其中IE上支持通过以下标签实现:

<meta http-equiv="X-UA-Compatible"content="chrome=IE8">

效果演示:


应用程序源代码:

CSS部分:

#svgContainer{
    width:800px;
    height:600px;
    background-color:#EEEEEE;
}
#sourceDiv { float: left; border: 2px solid blue}
#targetDiv { float: right;border: 2px solid red}

  

filter1.html中HTML源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Filter Demo</title>
<link href="default.css" rel="stylesheet" />
<script src="gloomyfishfilter.js"></scrip>
</head>
<body>
    <h1>HTML Canvas Image Process - By Gloomy Fish</h1>
    <div id="svgContainer">
        <div id="sourceDiv">
            <img id="source" src="../test.png" />
        </div>
        <div id="targetDiv">
            <canvas id="target"></canvas>
        </div>
    </div>
    <div id="btn-group">
        <button type="button" id="invert-button">反色</button>
        <button type="button" id="adjust-button">灰色调</button>
        <button type="button" id="blur-button">模糊</button>
        <button type="button" id="relief-button">浮雕</button>
        <button type="button" id="diaoke-button">雕刻</button>
        <button type="button" id="mirror-button">镜像</button>
    </div>
</body>
</html>


filter1.html中JavaScript源代码:

var tempContext = null; // global variable 2d context
window.onload = function() {
    var source = document.getElementById("source");
    var canvas = document.getElementById("target");
    canvas.width = source.clientWidth;
    canvas.height = source.clientHeight;
  
    if (!canvas.getContext) {
        console.log("Canvas not supported. Please install a HTML5 compatible browser.");
        return;
    }
      
    // get 2D context of canvas and draw image
    tempContext = canvas.getContext("2d");
    tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);
  
       // initialization actions
       var inButton = document.getElementById("invert-button");
       var adButton = document.getElementById("adjust-button");
       var blurButton = document.getElementById("blur-button");
       var reButton = document.getElementById("relief-button");
       var dkButton = document.getElementById("diaoke-button");
       var mirrorButton = document.getElementById("mirror-button");
  
       // bind mouse click event
       bindButtonEvent(inButton, "click", invertColor);
       bindButtonEvent(adButton, "click", adjustColor);
       bindButtonEvent(blurButton, "click", blurImage);
       bindButtonEvent(reButton, "click", fudiaoImage);
       bindButtonEvent(dkButton, "click", kediaoImage);
       bindButtonEvent(mirrorButton, "click", mirrorImage);
}
  
function bindButtonEvent(element, type, handler)
{
    if(element.addEventListener) {
       element.addEventListener(type, handler, false);
    } else {
       element.attachEvent('on'+type, handler); // for IE6,7,8
    }
}
  
function invertColor() {
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
    var binaryData = canvasData.data;
         
       // Processing all the pixels
       gfilter.colorInvertProcess(binaryData, len);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}
  
function adjustColor() {
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
       var binaryData = canvasData.data;
         
       // Processing all the pixels
       gfilter.colorAdjustProcess(binaryData, len);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}
  
function blurImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
         
       // Processing all the pixels
       gfilter.blurProcess(tempContext, canvasData);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}
      
function fudiaoImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
         
       // Processing all the pixels
       gfilter.reliefProcess(tempContext, canvasData);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}
  
function kediaoImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
         
       // Processing all the pixels
       gfilter.diaokeProcess(tempContext, canvasData);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}
  
function mirrorImage()
{
    var canvas = document.getElementById("target");
    var len = canvas.width * canvas.height * 4;
    var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
         
       // Processing all the pixels
       gfilter.mirrorProcess(tempContext, canvasData);
  
       // Copying back canvas data to canvas
       tempContext.putImageData(canvasData, 0, 0);
}

滤镜源代码(gloomyfishfilter.js):

var gfilter = {
    type: "canvas",
    name: "filters",
    author: "zhigang",
    getInfo: function () {
        return this.author + ' ' + this.type + ' ' + this.name;
    },
  
    /**
     * invert color value of pixel, new pixel = RGB(255-r, 255-g, 255 - b)
     * 
     * @param binaryData - canvas's imagedata.data
     * @param l - length of data (width * height of image data)
     */
    colorInvertProcess: function(binaryData, l) {
        for (var i = 0; i < l; i += 4) {
            var r = binaryData[i];
            var g = binaryData[i + 1];
            var b = binaryData[i + 2];
      
            binaryData[i] = 255-r;
            binaryData[i + 1] = 255-g;
            binaryData[i + 2] = 255-b;
        }
    },
      
    /** 
     * adjust color values and make it more darker and gray...
     *  
     * @param binaryData
     * @param l
     */
    colorAdjustProcess: function(binaryData, l) {
        for (var i = 0; i < l; i += 4) {
            var r = binaryData[i];
            var g = binaryData[i + 1];
            var b = binaryData[i + 2];
  
            binaryData[i] = (r * 0.272) + (g * 0.534) + (b * 0.131);
            binaryData[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);
            binaryData[i + 2] = (r * 0.393) + (g * 0.769) + (b * 0.189);
        }
    },
      
    /** 
     * deep clone image data of canvas
     *  
     * @param context
     * @param src
     * @returns
     */ 
    copyImageData: function(context, src)
    {
        var dst = context.createImageData(src.width, src.height);
        dst.data.set(src.data);
        return dst;
    },
      
    /** 
     * convolution - keneral size 5*5 - blur effect filter(模糊效果)
     * 
     * @param context
     * @param canvasData
     */ 
    blurProcess: function(context, canvasData) {
        console.log("Canvas Filter - blur process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        var sumred = 0.0, sumgreen = 0.0, sumblue = 0.0;
        for ( var x = 0; x < tempCanvasData.width; x++) {
            for ( var y = 0; y < tempCanvasData.height; y++) {
      
                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                for(var subCol=-2; subCol<=2; subCol++) {
                    var colOff = subCol + x;
                    if(colOff <0 || colOff >= tempCanvasData.width) {
                        colOff = 0;
                    }
                    for(var subRow=-2; subRow<=2; subRow++) {
                        var rowOff = subRow + y;
                        if(rowOff < 0 || rowOff >= tempCanvasData.height) {
                            rowOff = 0;
                        }
                        var idx2 = (colOff + rowOff * tempCanvasData.width) * 4;
                        var r = tempCanvasData.data[idx2 + 0];
                        var g = tempCanvasData.data[idx2 + 1];
                        var b = tempCanvasData.data[idx2 + 2];
                        sumred += r;
                        sumgreen += g;
                        sumblue += b;
                    }
                }
                 
                // calculate new RGB value
                var nr = (sumred / 25.0);
                var ng = (sumgreen / 25.0);
                var nb = (sumblue / 25.0);
                  
                // clear previous for next pixel point
                sumred = 0.0;
                sumgreen = 0.0;
                sumblue = 0.0;
                  
                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    },
      
    /** 
     * after pixel value - before pixel value + 128 
     * 浮雕效果 
     */  
    reliefProcess: function(context, canvasData) {
        console.log("Canvas Filter - relief process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 1; x < tempCanvasData.width-1; x++)
        {
            for ( var y = 1; y < tempCanvasData.height-1; y++)
            {
      
                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var bidx = ((x-1) + y * tempCanvasData.width) * 4;
                var aidx = ((x+1) + y * tempCanvasData.width) * 4;
                  
                // calculate new RGB value
                var nr = tempCanvasData.data[aidx + 0] - tempCanvasData.data[bidx + 0] + 128;
                var ng = tempCanvasData.data[aidx + 1] - tempCanvasData.data[bidx + 1] + 128;
                var nb = tempCanvasData.data[aidx + 2] - tempCanvasData.data[bidx + 2] + 128;
                nr = (nr < 0) ? 0 : ((nr >255) ? 255 : nr);
                ng = (ng < 0) ? 0 : ((ng >255) ? 255 : ng);
                nb = (nb < 0) ? 0 : ((nb >255) ? 255 : nb);
                  
                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    },
      
    /** 
     *  before pixel value - after pixel value + 128 
     *  雕刻效果 
     *  
     * @param canvasData 
     */  
    diaokeProcess: function(context, canvasData) {
        console.log("Canvas Filter - process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 1; x < tempCanvasData.width-1; x++)
        {
            for ( var y = 1; y < tempCanvasData.height-1; y++)
            {
      
                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var bidx = ((x-1) + y * tempCanvasData.width) * 4;
                var aidx = ((x+1) + y * tempCanvasData.width) * 4;
                  
                // calculate new RGB value
                var nr = tempCanvasData.data[bidx + 0] - tempCanvasData.data[aidx + 0] + 128;
                var ng = tempCanvasData.data[bidx + 1] - tempCanvasData.data[aidx + 1] + 128;
                var nb = tempCanvasData.data[bidx + 2] - tempCanvasData.data[aidx + 2] + 128;
                nr = (nr < 0) ? 0 : ((nr >255) ? 255 : nr);
                ng = (ng < 0) ? 0 : ((ng >255) ? 255 : ng);
                nb = (nb < 0) ? 0 : ((nb >255) ? 255 : nb);
                  
                // assign new pixel value
                canvasData.data[idx + 0] = nr; // Red channel
                canvasData.data[idx + 1] = ng; // Green channel
                canvasData.data[idx + 2] = nb; // Blue channel
                canvasData.data[idx + 3] = 255; // Alpha channel
            }
        }
    },
      
    /** 
     * mirror reflect 
     *  
     * @param context 
     * @param canvasData 
     */  
    mirrorProcess : function(context, canvasData) {
        console.log("Canvas Filter - process");
        var tempCanvasData = this.copyImageData(context, canvasData);
        for ( var x = 0; x < tempCanvasData.width; x++) // column
        {
            for ( var y = 0; y < tempCanvasData.height; y++) // row
            {
      
                // Index of the pixel in the array
                var idx = (x + y * tempCanvasData.width) * 4;
                var midx = (((tempCanvasData.width -1) - x) + y * tempCanvasData.width) * 4;
                  
                // assign new pixel value
                canvasData.data[midx + 0] = tempCanvasData.data[idx + 0]; // Red channel
                canvasData.data[midx + 1] = tempCanvasData.data[idx + 1]; ; // Green channel
                canvasData.data[midx + 2] = tempCanvasData.data[idx + 2]; ; // Blue channel
                canvasData.data[midx + 3] = 255; // Alpha channel
            }
        }
    },
}



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航