canvas练习 --------马赛克效果

最新推荐文章于 2022-12-31 21:51:36 发布

WaNgLu：）

最新推荐文章于 2022-12-31 21:51:36 发布

阅读量495

点赞数

分类专栏：前端文章标签： canvas练习马赛克效果

本文链接：https://blog.csdn.net/qq_44313091/article/details/102764205

版权

前端专栏收录该内容

42 篇文章 2 订阅

订阅专栏

马赛克效果思路，在画布上选取一个马赛克矩形，从马赛克矩形中随机抽出一个像素点的信息(rgba)，将整个马赛克矩形中的像素点信息统一调成随机抽出的那个。

以下的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*清除浏览器的默认样式*/
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			
			#msk{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				background: gray;
			}
		</style>
	</head>
	<body>
		<canvas id="msk" ></canvas>
		
		<script type="text/javascript">
			var canvas = document.querySelector("#msk")
			if(canvas.getContext){
				var ctx =canvas.getContext("2d")
				
				var img =new Image()
				img.src ="../img/1.jpg"
				img.onload = function(){
					//画布的宽为图片的2倍
					canvas.width = img.width*2
					canvas.height = img.height
					draw();
				}
				
		
		
		
		function draw (){
					ctx.drawImage(img,0,0)
					//oldImagedata是获取原画布上的ImageData
					//newImagedata是新建的ImageData
					var oldImgdata = ctx.getImageData(0,0,img.width,img.height)
					var newImgdata = ctx.createImageData(img.width,img.height)			
					
					//马赛克
				/*
				 * 	1.选取一个马赛克矩形
				 * 	2.从马赛克矩形中随机抽出一个像素点的信息（rgba）
				 * 	3.将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
				 */

					var size =5;   //这里设置的马赛克的大小为5
					for(var i=0;i<oldImgdata.width/size;i++){
						for(var j=0;j<oldImgdata.height/size;j++){
							//(i,j)每一个马赛克矩形的坐标
					//Math.random() 随机生成[0,1)的数
						var color = getPxInfo(oldImgdata,i*size+Math.floor((Math.random()*size)),j*size+Math.floor((Math.random()*size)))
						
						for(var a =0;a<size;a++){
							for(var b=0;b<size;b++){
								setPxInfo(newImgdata,i*size+a,j*size+b,color)
							}
							
						}
						}
					}
					ctx.putImageData(newImgdata,img.width,0)
			}
			
			//getPxInfo函数是获取单个像素的颜色
			function getPxInfo(imgdata,x,y){
					var w =imgdata.width
					var h =imgdata.height
					 
					var color = [] ;
					var data =imgdata.data;
					color[0] = data[(y*w+x)*4];
					color[1] = data[(y*w+x)*4+1];
					color[2] = data[(y*w+x)*4+2];
					color[3] = data[(y*w+x)*4+3];
					return color;
				}
				
				//setPxInfo是修改单个像素的颜色
				function setPxInfo(imgdata,x,y,color){
					var w =imgdata.width
					var h =imgdata.height
					 
					var data =imgdata.data;
					 data[(y*w+x)*4] =color[0];
					 data[(y*w+x)*4+1] =color[1];
					 data[(y*w+x)*4+2] =color[2] ;
					 data[(y*w+x)*4+3] = color[3] ;
				}
				}
			
		</script>
	</body>
</html>

假设大的矩形就是画布，每一个小矩形表示一个像素点。有颜色的矩形框表示一个马赛克矩形，将画布分为多个马赛克矩形，然后在马赛克矩形中随机抽取一个像素的颜色，将马赛克矩形中的其他颜色全部换成随机生成的颜色，从而达到了马赛克的效果

效果如下

有任何问题请留言，我会给大家解答！！！！！

WaNgLu：）

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas练习 --------马赛克效果

马赛克效果思路，在画布上选取一个马赛克矩形，从马赛克矩形中随机抽出一个像素点的信息(rgba)，将整个马赛克矩形中的像素点信息统一调成随机抽出的那个。以下的代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &lt...
复制链接

扫一扫