<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="" height=""></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '2.jpg';
img.onload = function() {
canvas.width = img.width * 2;
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,canvas.width/2,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];
}
}
</script>
</html>
