canvas马赛克实现

canvas马赛克思路

1、设定一个马赛克矩形的大小

比如设定为5，就是一个（width：5px；height：5px）的矩形，

2、从马赛克矩形中随机取出一个像素点信息，即rgba值；
3、将整个马赛克矩形中的像素点信息统一调成随机抽出的那个

当马赛克矩形为1时，就没有马赛克了

代码示例：

window.onload = function() {
    var canvas = document.getElementById('msk');
    if(canvas.getContext) {
      var ctx = canvas.getContext('2d');
      var img = new Image();
      img.src = '2.png';
      img.onload = function() {
        canvas.width = img.width ;
        canvas.height = img.height;
        draw();
      }
      function draw() {
        //  把图片写入画布
        ctx.drawImage(img,0,0,img.width,img.height);
        //  获取老的图片数据
        var oldImageData = ctx.getImageData(0,0,img.width,img.height);
        //  创建一个跟老图片一样大的空白图片数据
        var newImageData = ctx.createImageData(img.width,img.height);
        //  设定一个马赛克矩形的值
        var size = 5;
        //  生成n个马赛克矩形开始
        for(var i=0;i<oldImageData.width/size;i++) {
          for(var j=0;j<oldImageData.height/size;j++){
            //  从马赛克矩形中随机抽出一个像素点信息
            var color = getPxInfo(oldImageData,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(newImageData,i*size+a,j*size+b,color);
              }
            }
            //  把当前马赛克矩形中的所有像素点统一成随机选出的像素点：结束

          }
        }
        //  生成n个马赛克矩形结束

        //  每次写入新的imagedata，先清空画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //把新的imagedata写入画布；
        ctx.putImageData(newImageData,0,0);
      }
    }
    //	获取某个像素点的函数
    function getPxInfo(imgdata,x,y){
		var color = [];
		var data = imgdata.data;
		var w = imgdata.width;
		var h = imgdata.height;
		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;
	}  
	//	设置某个像素点的函数
	function setPxInfo(imgdata,x,y,color){
		var data = imgdata.data;
		var w = imgdata.width;
		var h = imgdata.height;
		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];
	}
  }