canvas 之图片模糊&马赛克

最新推荐文章于 2022-12-31 21:51:36 发布
最新推荐文章于 2022-12-31 21:51:36 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： html5 文章标签： 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>

昔人'
关注
专栏目录
canvas之马赛克
qq_31207499的博客
07-20 440
        用canvas的像素操作做了一个简单的马赛克效果。主要是利用的canvas中的一些有关像素的函数，思路很简单，就是将马赛克盒子中的所有像素都设置成相同的，设置的数据可以从马赛克盒子范围内随机选取一个单像素的数据。因为canvas中没有直接操作单像素的函数，所以要自己定义。 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;  ...
canvas-马赛克实例
weixin_54057363的博客
03-10 772
canvas中对像素操作的扩展-实现马赛克效果
基于HTML5 Canvas实现的图片马赛克模糊特效
01-18
插件描述：基于HTML5 Canvas实现的图片马赛克模糊特效.
使用Canvas制作马赛克
qq_62994974的博客
12-31 566
Canvas制作马赛克
canvas实现图片马赛克
weixin_34153893的博客
03-23 748
1. 原生canvas实现用到的API 1） getContext(contextID) ---返回一个用于在画布上绘图的环境 Canvas.getContext('2d') // 返回一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中 复制代码2）drawImage drawImage(imgObj, x, y) // 按原图大小绘制, x、...
canvas图像处理实现马赛克效果
alm1968的博客
08-29 552
　　马赛克是我们经常在视频中会见到的，本例通过canvas访问图像像素值并且更改使之呈现成马赛克效果，用以遮挡不想让大家看到的地方（因为是对图像的处理，本地无法看到效果，需要把实例上传到服务器上（本地服务器也可以））。 效果对比图： 　　本例就是利用canvas处理图像像素，获取当前像素的具体位置，然后做一定的处理，看一下代码吧，里面有详尽的注释！ View Code ...
基于HTML5 canvas实现图片马赛克特效.zip
07-11
实现效果： 基于HTML5 canvas实现图片马赛克特效，非常不错的HTML5图片特效代码，支持自定义马赛克模糊 程度，挺不错的H5页面特效，当然还需要JS的支持。
Html5-canvas之图片添加马赛克
11-06
本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果，这是许多网页应用、照片编辑器和游戏中的常见功能。 首先，我们需要理解HTML5 Canvas的基本结构。Canvas是一个基于矢量图形的画布，可以通过JavaScript来...
基于HTML5 canvas实现图片马赛克特效
01-01
HTML5的canvas元素是网页动态...我们创建了一个canvas元素，并在其中加载和绘制图片，然后通过遍历和处理每个像素块，实现了马赛克效果。最后，我们提供了调整马赛克模糊程度的方法，使得此特效具有较高的可定制性。
使用canvas实现图片马赛克
07-27
总结起来，通过canvas和JavaScript，我们可以实现自定义的图片马赛克效果，包括设定马赛克块大小、添加模糊处理等。这种方法具有较高的灵活性，可以根据需求进行调整和扩展，为网页中的图片处理提供了更多的可能性。
vue实现图片打马赛克
05-29
支持按照图片原始比例显示，实现精准打码；可便捷操作一键打码，一键清除；画质清晰；插件实现，代码简单。
马赛克原始canvas
08-17
马赛克原始canvas 适合app
HTML5 canvas生成图片马赛克效果.zip
07-03
HTML5 canvas生成图片马赛克效果是一款使用HTML canvas来将图片制作成马赛克效果的js插件。该马赛克插件可以使用canvas生成各种形状的像素马赛克，并将图片按照其颜色深度用不同颜色的马赛克进行渲染，效果十分逼真。
Leaflet.CanvasMask:用画布和东西掩盖 geojson 的东西
06-15
Leaflet.CanvasMask 用画布和东西掩盖 geojson 的东西 ＃安装 bower install leaflet-canvasmask ＃用法 var bigRectangle = { "type" : "FeatureCollection" , "features" : [ { "type" : "Feature" , "properties" : { } , "geometry" : { "type" : "Polygon" , "coordinates" : [ [ [ - 116 , 34 ] , [ - 116 , 43 ] , [ - 81 , 43 ] , [ - 81 , 34 ] , [ - 116 , 34 ] ] ] } } ] } ; L . tileLayer . canvasMask ( { maskColor : 'rgba(0,
test7.rar canvas图片马赛克处理
07-16
"test7.rar canvas图片马赛克处理"这个主题聚焦于使用HTML5的Canvas API来实现图片的马赛克效果。Canvas是HTML5的一个核心特性，它允许在网页上动态绘制图形，包括对图像进行各种操作，如缩放、旋转、裁剪以及我们...
canvas实现图片马赛克的示例代码
09-28
马赛克效果通常用于保护隐私或增加视觉艺术感，通过模糊或像素化处理将图片的部分细节隐藏起来。在HTML5中，我们可以利用`canvas`的绘图功能来实现这一效果。 首先，要实现马赛克效果，我们需要获取到`canvas`的2D...
利用canvas给图片打马赛克
扫地僧
08-05 777
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片打码</title> <style> canvas { border: 1px solid
H5之canvas制作图片马赛克
小人物的点点滴滴
03-14 305
原理：马赛克就是于取一块像素点换成他附近大小的像素点。 用到的比较少接触的api： getImageData： 返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为*(sx, sy)、宽为sw、高为sh。* ImageData ctx.getImageData(sx, sy, sw, sh); sx //将要被提取的图像数据矩形区域的左上角 x ...
canvas 生成图片模糊
最新发布
09-06
要在 Canvas 中生成模糊的图片，你可以使用 HTML5 的 Canvas API 和 CSS 的滤镜效果来实现。下面是一个简单的示例代码： ``` // 获取 Canvas 元素和 2D 上下文 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制原始图像到 Canvas const image = new Image(); image.src = 'path/to/your/image.jpg'; image.onload = function() { ctx.drawImage(image, 0, 0); // 使用 CSS 滤镜效果添加模糊 canvas.style.filter = 'blur(5px)'; } ``` 以上代码中，首先获取到 Canvas 元素和 2D 上下文。然后创建一个 Image 对象，指定要加载的图片路径，并在加载完成后使用 `drawImage` 方法将图片绘制到 Canvas 上。 最后，使用 `canvas.style.filter` 属性来添加 CSS 滤镜效果。在这个例子中，我们使用 `blur` 滤镜并设置模糊半径为 5 像素。 你可以根据需要调整模糊效果的参数，例如修改模糊半径、添加其他滤镜效果等。记得在使用滤镜之前，确保你的浏览器支持 CSS 滤镜效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值