js + canvas 图片滤镜

以前的数字图像处理课设，老师说随便怎么实现。我便用js做了几个效果，并可以将处理后图片下载下来，此博客纯属记录。

加油吧~~

效果等：

.html:

	
	
	


	

		carve
		spread
		sepia
		mosaic
		blackWhite
		clear
		toggle
		blur
		brightness
		red
	


	
	
	

	

		
		download
	

canvas.js

// 1.黑白图像
	function blackWhite(imageData) {
		var d = imageData.data;
		for (var i = 0; i0; i--) {  // 行
	        for (var j=w; j>0; j--) {  // 列
	            for (var k=0; k<3; k++) {
	                var num = (i*w + j)*4 + k;
	                var numUp = ((i-1)*w+j)*4 + k;
	                var numDown = ((i+1)*w+j)*4 + k;
					data[num] = data[num]-data[numUp-4]+128;         
	        	}
		    }
		}
	}

	// 9.雾化
	/*function fog(imageData){
	    var w = imageData.width, var data = imageData.data;

	    for (var i=h; i>0; i--) {  // 行
	        for (var j=w; j>0; j--) {  // 列
	        	var num = (i*w + j)*4;
	        	if (Math.random()<0.5) {
	        		data[num] = 255;
	        		data[num+1] = 255;
	        		data[num+2] = 255;
	        	}
		    }
		}
	}*/

	// 10.毛玻璃效果
	// 原理：用当前点四周一定范围内任意一点的颜色来替代当前点颜色，最常用的是随机的采用相邻点进行替代。
	function spread(canvasData) {  
	    var w = canvasData.width, h = canvasData.height;

     	for ( var i = 0; i < h; i++) {  
         	for ( var j = 0; j < w; j++) {  
  				for (var k = 0; k<3; k++) {
  					// Index of the pixel in the array  
		        	var num = (i*w + j) * 4 + k;  
		  
		           	var rand = Math.floor(Math.random()*10)%3;
		           	var num2 = ((i+rand)*w + (j+rand)) * 4 + k;  
		           	
		           	canvasData.data[num] = canvasData.data[num2]
		           	//canvasData.data[idx + 3] = 255; // Alpha channel    
		           	// add black border  
		           	//if(x < 4 || y < 4 || x > (canvasData.width - 4) || y > (canvasData.height - 4)) {  
		            //	canvasData.data[num] = 0;  
		           	//}  
  				}
	        }  
    	}  
 	}
 	// 11.马赛克
 	// 将图像分成大小一致的图像块，每一个图像块都是一个正方形，
 	// 并且在这个正方形中所有像素值都相等。我们可以将这个正方形看作是一个模板窗口，
 	// 模板中对应的所有图像像素值都等于该模板的左上角第一个像素的像素值，
 	// 这样的效果就是马赛克效果，而正方形模板的大小则决定了马赛克块的大小，即图像马赛克化的程度。
 	function mosaic(imageData,size){
 		var w = imageData.width, h = imageData.height;
		var data = imageData.data;
	    
	    for(var i=1; i