canvas 之图片模糊&马赛克 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="vanvas1" width="100" height="100"></canvas>
		<canvas id="vanvas2" width="100" height="100"></canvas>
		<button id="btn">btn</button>
		<button id="mohu">模糊</button>
		<button id="mask">马赛克</button>
	</body>
	<script type="text/javascript">
		var canvas1 = document.getElementById("vanvas1");
		var canvas2 = document.getElementById("vanvas2");
		
		var context1 = canvas1.getContext("2d");
		var context2 = canvas2.getContext("2d");
		var cw = canvas1.width;
		var ch = canvas1.height;
		
		
		mohu.onclick = function(){
			//用来循环
			var xunhuanImgData = context1.getImageData(0,0,100,100);
			var xunhuanPxData = xunhuanImgData.data;
			
			//循环修改
			var xiugaiImgData = context1.getImageData(0,0,100,100);
			var xiugaiPxData = xiugaiImgData.data;
			var quan = 4;
			
			for(var i=quan;i<cw-quan;i++){
				for(var j=quan;j<ch-quan;j++){
//					var p = j*cw+i; // 当前元素 ...shanchu.
					var sumR = 0;
					var sumG = 0;
					var sumB = 0;
					//找他周围的元素，，
					for(var x = -quan;x<=quan;x++){
						for(var y = -quan;y<=quan;y++){
							var xx = i+x;
							var yy = j+y;
							var pp = yy*cw+xx; //周围的元素。
						sumR += xunhuanPxData[pp*4+0];
						sumG += xunhuanPxData[pp*4+1];
						sumB += xunhuanPxData[pp*4+2];
						}
					}
					var totlal = (2*quan+1)*(2*quan+1);
					var avgR = sumR/totlal;
					var avgG = sumG/totlal;
					var avgB = sumB/totlal;
					var p = j*cw+i;   //benshen
					xiugaiPxData[p*4+0] = avgR;
					xiugaiPxData[p*4+1] = avgG;
					xiugaiPxData[p*4+2] = avgB;
				}
			}
			context2.putImageData(xiugaiImgData,0,0,0,0,100,100);
		}
		mask.onclick = function(){
			//用来循环
			var xunhuanImgData = context1.getImageData(0,0,100,100);
			var xunhuanPxData = xunhuanImgData.data;
			
			//循环修改
			var xiugaiImgData = context1.getImageData(0,0,100,100);
			var xiugaiPxData = xiugaiImgData.data;
			var quan = 3;
			
			for(var i=50;i<80;i = i+2*quan+1){
				for(var j=50;j<80;j = j+2*quan+1){
//					var p = j*cw+i; // 当前元素 ...shanchu.
					var sumR = 0;
					var sumG = 0;
					var sumB = 0;
					//找他周围的元素，，
					for(var x = -quan;x<=quan;x++){
						for(var y = -quan;y<=quan;y++){
							var xx = i+x;
							var yy = j+y;
							var pp = yy*cw+xx; //周围的元素。
						sumR += xunhuanPxData[pp*4+0];
						sumG += xunhuanPxData[pp*4+1];
						sumB += xunhuanPxData[pp*4+2];
						}
					}
					
					var totlal = (2*quan+1)*(2*quan+1);
					var avgR = sumR/totlal;
					var avgG = sumG/totlal;
					var avgB = sumB/totlal;
					
					for(var x = -quan;x<=quan;x++){
						for(var y = -quan;y<=quan;y++){
							var xx = i+x;
							var yy = j+y;
							var pp = yy*cw+xx; //周围的元素。
						xiugaiPxData[pp*4+0] = avgR;
						xiugaiPxData[pp*4+1] = avgG;
						xiugaiPxData[pp*4+2] = avgB;
//						xiugaiPxData[pp*4+3] = 0~255;
						}
					}
					
				}
			}
			context2.putImageData(xiugaiImgData,0,0,0,0,100,100);
		}
		
		
//		}
		var fengjing = new Image();
		fengjing.src = "qq.jpg";
		fengjing.onload = function(){
			context1.drawImage(this,0,0,100,100);
		}
		
		btn.onclick = function(){
			//1获取canvas1中的图片数据【imgData】
			var imgData  =context1.getImageData(0,0,100,100);
			//2从imgData中获取像素数据（pxData）
			var pxData = imgData.data;
			//3修改像素
			for(var i=0;i<10000;i++){
//				pxData[i*4+0] = 22;   //R 值
//				pxData[i*4+1] = 41;   //g 值
//				pxData[i*4+2] = 120;   //b 值
//				pxData[i*4+0] = 0;   //R 值

				var r = pxData[i*4+0];
				var g = pxData[i*4+1];
				var b = pxData[i*4+2];
				pxData[i*4+2] = 255-b;
				pxData[i*4+1] = 255-g;
				pxData[i*4+0] = 255-r;
				
				
//				pxData[i*4+0] = 255;   //谁=0是就没有了 ，	
			}
			//4把之前修改过后的结果绘制到canvas2中。
				

					//下图解：	j: 0123;i:横着的12345个；
//				0   o o o o o 
//				1	o o o o o
//				2	o o o o o
//				3	o o o o o
			//2方法2  i代表行。j代表高。
			for(var i=0;i<100;i++){
				for(var j=0;j<100;j++){
					var p = (i*j)+i;   //确定元素下标；
					pxData[p*4+1] = 255;
					
					//s随机控制
					var x = Math.random();
					if(x<0.2){
						pxData[p*4+0] = 255;
						pxData[p*4+1] = 255;
						pxData[p*4+2] = 255;
					}
//					if(1%13==0){
//						pxData[p*4+0] = 255;
//						pxData[p*4+1] = 255;
//						pxData[p*4+2] = 255;
//					}
				}
			}
			context2.putImageData(imgData,0,0,0,0,100,100);
		}
		
		
		
		
//	模糊度==：》》》》》	//本身 = （本身+周围）/ 总数   ,本身 = 平均值

		


// 本身 +周围 = 平均值》》》马赛克；
	</script>
</html>

posted @   ·一库  阅读(117)  评论(0)  编辑  收藏  举报
相关博文：
· css3之canvas 基础
· canvas画布之》》》》》》打飞机游戏
· canvas怎么解决图片和文字模糊的问题？
· canvas
· H5 canvas 解决合成图模糊（canvas真机下scale不起作用，无法缩放显示的问题）
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示