canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)

最新推荐文章于 2023-01-16 10:06:50 发布

小水91

最新推荐文章于 2023-01-16 10:06:50 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/lsy__lsy/article/details/80349659

版权

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滤镜</title>
</head>
<body>
<canvas id="canvasa" width="130" height="170" style=" border: 1px solid #c03;"></canvas>
<canvas id="canvasb" width="130" height="170" style=" border: 1px solid #06C1AE;"></canvas>
<p><a href="javascript:greyeffect()">Grey Effect</a></p>
<p><a href="javascript:Blackeffect()">Black&White Effect</a></p>
<p><a href="javascript:reverseeffect()">Reverse Effect</a></p>
<p><a href="javascript:blureffect()">Blur Effect</a></p>
<p><a href="javascript:mosaiceffect()">Mosaic Effect</a></p>
<script>
var canvasa=document.getElementById('canvasa');
var contexta=canvasa.getContext('2d');
var cancvasb=document.getElementById('canvasb')
var contextb=canvasb.getContext('2d');


var image=new Image()
window.οnlοad=function(){
	image.src="../girl.png"
	image.οnlοad=function(){
		contexta.drawImage(image,0,0,canvasa.width,canvasa.height)
	}	
}
function greyeffect(){
	var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	//对图片的像素进行操作  imageData.data  data的属性中存储的就是图像的像素
	var pixelData=imageData.data
	for(var i=0;i<canvasb.width*canvasb.height;i++){
		//首先要获取这个像素的rgb的值
		var r=pixelData[4*i+0]  //r
		var g=pixelData[4*i+1]  //g
		var b=pixelData[4*i+2]  //b		
		//灰度的计算方法  灰色滤镜
		var grey=r*0.3+g*0.59+b*0.11		
		//把灰度值赋值给rgb
		pixelData[4*i+0]=grey
		pixelData[4*i+1]=grey
		pixelData[4*i+2]=grey
				
	}	
	contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)
}
//黑白滤镜就是图像上没有灰度值
function Blackeffect(){
	var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	//对图片的像素进行操作  imageData.data  data的属性中存储的就是图像的像素
	var pixelData=imageData.data
	for(var i=0;i<canvasb.width*canvasb.height;i++){
		//首先要获取这个像素的rgb的值
		var r=pixelData[4*i+0]  //r
		var g=pixelData[4*i+1]  //g
		var b=pixelData[4*i+2]  //b		
		//对每一个灰度值给一个黑白的分类
		var grey=r*0.3+g*0.59+b*0.11
		if(grey>255/2){
			v=255
		}else{
		   v=0	
		}	
		//把灰度值赋值给rgb
		pixelData[4*i+0]=v
		pixelData[4*i+1]=v
		pixelData[4*i+2]=v				
	}	
	contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)  		
}
//反色滤镜 就是把rgb的值修改为255-rgb的值
function reverseeffect(){
	var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	//对图片的像素进行操作  imageData.data  data的属性中存储的就是图像的像素
	var pixelData=imageData.data
	for(var i=0;i<canvasb.width*canvasb.height;i++){
		//首先要获取这个像素的rgb的值
		var r=pixelData[4*i+0]  //r
		var g=pixelData[4*i+1]  //g
		var b=pixelData[4*i+2]  //b		
		//把灰度值赋值给rgb
		pixelData[4*i+0]=255-r
		pixelData[4*i+1]=255-g
		pixelData[4*i+2]=255-b				
	}	
	contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)  				
}


//模糊滤镜 ：是需要参考周围的一个滤镜  在一个图像中参考周围的像素
function blureffect(){
	//使用bluerfferct需要参考周围的像素点 那么周围的像素点不能被修改 所以不能使用一个imageData来存放
	//需要创建一份同样的imageData拷贝 来进行参考
	var tmpImageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	var tmpPixelData=tmpImageData.data
	
	var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	//对图片的像素进行操作  imageData.data  data的属性中存储的就是图像的像素
	var pixelData=imageData.data
	//遍历二维数组
	//设置模糊系数
	var blurR=3
	//模糊像素点获取 参考的是正方形的面积
	var totalnum=(2*blurR+1)*(2*blurR+1)
	for(var i=blurR;i<cancvasb.height-blurR;i++){ //数组溢出的问题 -blurR是为了解决越界的问题
		for(var j=blurR;j<cancvasb.width-blurR;j++){
			//每一次遍历到ij的时候
			var totalr=0,totalg=0,totalb=0			
			//遍历每一个点周围八个点 一共九个点
			for(var dx=-blurR;dx<=blurR;dx++){  //循环八次
				for(var dy=-blurR;dy<=blurR;dy++){
					var x=i+dx;
					var y=j+dy
					//首先拿到像素点的位移
					var p=x*canvasb.width+y
					totalr+=tmpPixelData[p*4+0]
					totalg+=tmpPixelData[p*4+1]
					totalb+=tmpPixelData[p*4+2]
					//当走完整个八个循环之后 那么就分别存储了totalr totalg totalb的和
				}
			}
			//遍历到第i行第j列的时候 实际对应的像素应该是
			var p=i*canvasb.width+j
			//给当前的像素点辅以total的平均值
			pixelData[p*4+0]=totalr/totalnum;
			pixelData[p*4+1]=totalg/totalnum;
			pixelData[p*4+2]=totalb/totalnum;
			
		}
	}	contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)
}
//马赛克滤镜 则是把一块的所有值 全部附上平均值
function mosaiceffect(){
	//使用bluerfferct需要参考周围的像素点 那么周围的像素点不能被修改 所以不能使用一个imageData来存放
	//需要创建一份同样的imageData拷贝 来进行参考
	var tmpImageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	var tmpPixelData=tmpImageData.data
	
	var imageData=contexta.getImageData(0,0,canvasa.width,canvasb.height)
	//对图片的像素进行操作  imageData.data  data的属性中存储的就是图像的像素
	var pixelData=imageData.data
	//遍历二维数组
	//定义每一个马赛克的块的边长   如果原图像是800*500 那么设置size=16  长和宽都能被16整除 根据特定的长宽设置size
	var size=4
	//模糊像素点获取 参考的是正方形的面积
	var totalnum=size*size
	for(var i=0;i<cancvasb.height;i+=size){ //数组溢出的问题 -blurR是为了解决越界的问题
		for(var j=0;j<cancvasb.width;j+=size){
			//每一次遍历到ij的时候
			var totalr=0,totalg=0,totalb=0			
			for(var dx=0;dx<size;dx++){ 
				for(var dy=0;dy<size;dy++){
					var x=i+dx;
					var y=j+dy
					//首先拿到像素点的位移
					var p=x*canvasb.width+y
					totalr+=tmpPixelData[p*4+0]
					totalg+=tmpPixelData[p*4+1]
					totalb+=tmpPixelData[p*4+2]
					//当走完整个八个循环之后 那么就分别存储了totalr totalg totalb的和
				}
				//算出每一个块的平均值
				var p=i*canvasb.width+j
				var resr=totalr/totalnum
			    var resg=totalg/totalnum
			    var resb=totalb/totalnum
			    //把计算出的平均值赋值给每一个马赛克块中
			    for(var dx=0;dx<size;dx++){
			    	for(var dy=0;dy<size;dy++){
			    		var x=i+dx;
			    	    var y=j+dy
			    	    var p=x*canvasb.width+y
			    	    pixelData[p*4+0]=resr;
			            pixelData[p*4+1]=resg;
			            pixelData[p*4+2]=resb;
			    	}			    	
			    }
				
			}
	
			
		}
	}	contextb.putImageData(imageData,0,0,0,0,canvasb.width,canvasb.height)
}
</script>
</body>
</html>

小水91

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)

示例&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;滤镜&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;canvas id="canvasa" width="130
复制链接

扫一扫