web前端：canvas像素化-马赛克mosaic案例，原生js实现图片马赛克复制、覆盖

1.canvas图片马赛克原理及区间解析

*每一个mosaic马赛克矩形坐标(i,j)
* x=i y=j
* mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]
* mosaic马赛克(1,0)–>纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4]
* mosaic马赛克(0,0)–>横代表：(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]
* mosaic马赛克(0,1)–>横向代表：(0,5) (4,9) -->随机生成像素点区间[0-4] [5-9]
* mosaic马赛克(1,1)–>纵横项：(5,5) (9,9) -->随机生成像素点区间[5-9] [9-9]

2.效果图

3.less

* {
    margin: 0;
    padding: 0;
    #wrap {
        width: 600px;
        height: 800px;
        background: tomato;
        border: 2px solid white;
        border-radius: 5%;
        //这里不可使用position，会影响画布的坐标定位
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 5% auto;
        font: 20px "微软雅黑";
        text-align: center;
        color: white;
        transition: 2s;
        &:hover {
            background: steelblue;
        }
        h1 {
            margin-top: 8%;
        }
        h2 {
            margin-left: 30%;
            margin-top: 100%;
        }
        #wrap-canvas {
            position: absolute;
            background: lightgoldenrodyellow;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
}

4.js

$(function(){
	var canvasNode=document.querySelector("#wrap-canvas");
	if(canvasNode.getContext){
		var canvasPen=canvasNode.getContext("2d");
		
		var img=new Image();
		img.src="img/logo300-1.png";
		img.onload=function(){
			//画布高宽
			canvasNode.width=img.width*2;
			canvasNode.height=img.height*1.3;
			//开始绘制
			imgDraw();
		}
	}
	
	function imgDraw(){
		canvasPen.drawImage(img,0,30);
		//1.处理原始图片
		var originImg=canvasPen.getImageData(0,0,img.width,img.height);
		var newImg=canvasPen.createImageData(img.width,img.height);
		//2.马赛克mosaic
		//2.1选取一个马赛克矩形
		var mosaicSize=5;
		//2.2从矩形中随机抽出一个像素点data-rgba
		//横向坐标
		for(var i=0;i<originImg.width/mosaicSize;i++){
			//纵向坐标
			for(var j=0;j<originImg.height/mosaicSize;j++){
				/*每一个mosaic马赛克矩形坐标(i,j)
				 *                                                      x=i   y=j
				 * mosaic马赛克(0,0)-->纵代表:(0,0)   (4,4) -->随机生成像素点区间[0-4] [0-4]
				 * mosaic马赛克(1,0)-->纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4]
				 * mosaic马赛克(0,0)-->横代表：(0,0)  (4,4) -->随机生成像素点区间[0-4] [0-4]
				 * mosaic马赛克(0,1)-->横向代表：(0,5) (4,9) -->随机生成像素点区间[0-4] [5-9]
				 * mosaic马赛克(1,1)-->纵横项：(5,5) (9,9)  -->随机生成像素点区间[5-9] [9-9]
				 */
				/* Math.random -->返回[0-1)：包括0，但不包括1
				 * 开区间(a,b) : a和b之间，不包括a、b
				 * 闭区间[a,b] : a和b之间，包括a、b
				 * Math.random()*mosaicSize=[0,5]
				 * 1个像素的mosaic：并且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]
				 */
				var originColor=getPixelColor(
					originImg,
					i*mosaicSize+Math.floor(Math.random()*mosaicSize),//横坐标循环[5-9]
					j*mosaicSize+Math.floor(Math.random()*mosaicSize));//纵坐标循环[9-9]
				
				//2.3将矩形中的全部像素点，全部调整为随机抽出的mosaic马赛克像素点
				//这里完成第1个像素的mosaic马赛克模糊mosaicX、mosaicY
				for(var mosaicX=0;mosaicX<mosaicSize;mosaicX++){
					for(var mosaicY=0;mosaicY<mosaicSize;mosaicY++){
						//轮循每一个像素点:mosaicX，加入随机点i*mosaicSize+mosaicX
						setPixelColor(newImg,i*mosaicSize+mosaicX,j*mosaicSize+mosaicY,originColor);
					}
				}
			}
		}
		
		
		/*for(var i=0;i<newImg.data.length;i++){
			//测试图片填充
			newImg.data[4*i+3]=255;
		}*/

		/* 3.生成图片，在put时，定义图片位置
		 * utImageData(imgData,x,y) 写入像素数据
 		 *      x/y：let、top坐标，默认左上角
		 */
		//生成之前清理画布,put之前clear可以生成新的马赛克图片，但是会连同原始图片一同清理
		//canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
		//3.1生成新的马赛克图片
		canvasPen.putImageData(newImg,img.width,30);
		//3.2覆盖原始图+马赛克
		//canvasPen.putImageData(newImg,0,30);
		
	}
	
		//4.获取图像颜色
	function getPixelColor(img,x,y){
		var pixelColor=[];
		var pixelData=img.data;
		var pixelWidth=img.width;
		
		//获取颜色偏移量位置：column(y)*width(w)+row(x)
		//r
		pixelColor[0]=pixelData[(y*pixelWidth+x)*4];
		//g
		pixelColor[1]=pixelData[(y*pixelWidth+x)*4+1];
		//b
		pixelColor[2]=pixelData[(y*pixelWidth+x)*4+2];
		//a
		pixelColor[3]=pixelData[(y*pixelWidth+x)*4+3];
		return pixelColor;
	}
	//5.设置像素颜色
	function setPixelColor(img,x,y,pixelColor){
		var pixelData=img.data;
		var pixelWidth=img.width;
		
		pixelData[(y*pixelWidth+x)*4]=pixelColor[0];
		pixelData[(y*pixelWidth+x)*4+1]=pixelColor[1];
		pixelData[(y*pixelWidth+x)*4+2]=pixelColor[2];
		pixelData[(y*pixelWidth+x)*4+3]=pixelColor[3];
	}
})

5.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>canvas-图片马赛克mosaic</title>
	</head>
	<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/17-canvas-mosaic-pic.css" />

	<body>
		<div id="wrap">
			<h1>canvas图片-马赛克mosaic</h1>
			<canvas id="wrap-canvas"></canvas>
			<h2>PS：一刀coder</h2>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/17-canvas-mosaic-pic.js"></script>

</html>