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

简介: 纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfishfilter.js。

纯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    
            }
		}
	},
};

目录
相关文章
|
3天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
22 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
26天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
112 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
24天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
51 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
76 33
|
28天前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
58 29
|
25天前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
17 1
|
2月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
52 5
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
99 2
|
3月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
39 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码

热门文章

最新文章