1.获取像素点
- 通过var imgData =ctx.getImageData(0,0,img.width,img.height)获得画布上的像素信息。每个像素点的信息保存在data数组中。分别是R，G，B，A四个变量。
- 需要获取（X，Y）像素点的颜色。
（x,y）像素位于 y*imgData.width+x位
//获取像素点
function getPxInfo(imgData ,x, y){
var data=imgData.data;
var color=[];
color[0]=data[(y*imgData.width+x)*4];
color[1]=data[(y*imgData.width+x)*4+1];
color[2]=data[(y*imgData.width+x)*4+2];
color[3]=data[(y*imgData.width+x)*4+3];
return color;
}2.设置像素点
//修改像素点
function setPxInfo(imgData,x,y,color){
var data=imgData.data;
data[(y*imgData.width+x)*4]=color[0];
data[(y*imgData.width+x)*4+1]=color[1];
data[(y*imgData.width+x)*4+2]=color[2];
data[(y*imgData.width+x)*4+3]=color[3];
}3.绘制马赛克
//马赛克
function mskDraw(imgData){
ctx.clearRect(0,0,canvas.width,canvas.height)
var size=10;
for(var i=0;i<imgData.width/size;i++){
for(var j=0;j<imgData.height/size;j++){
var color=getPxInfo(imgData,Math.floor(i*size+ Math.random()*size),Math.floor(j*size+Math.random()*size))
for(var a=0;a<size;a++){
for(var b=0;b<size;b++){
setPxInfo(imgData,i*size+a,j*size+b,color);
}
}
}
}
}4.画图
function draw(){
ctx.drawImage(img,0,0);
var imgData =ctx.getImageData(0,0,img.width,img.height);
mskDraw(imgData) ;
ctx.putImageData(imgData,0,0)
}5.创建图片
var canvas=document.querySelector("#msk");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="懒羊羊.png";
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
draw();
}
}6.Canvas创建
<body>
<canvas id="msk"></canvas>
</body>7.CSS样式设置
<style>
*{margin: 0%;padding: 0%;}
html,body{height: 100%;overflow: hidden;}
#msk{position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background-color: pink;
}
</style>整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0%;padding: 0%;}
html,body{height: 100%;overflow: hidden;}
#msk{position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
background-color: pink;
}
</style>
</head>
<body>
<canvas id="msk"></canvas>
</body>
<script>
window.onload=function(){
var canvas=document.querySelector("#msk");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="懒羊羊.png";
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
draw();
}
}
//画图
function draw(){
ctx.drawImage(img,0,0);
var imgData =ctx.getImageData(0,0,img.width,img.height);
mskDraw(imgData) ;
ctx.putImageData(imgData,0,0)
}
//马赛克
function mskDraw(imgData){
ctx.clearRect(0,0,canvas.width,canvas.height)
var size=10;
for(var i=0;i<imgData.width/size;i++){
for(var j=0;j<imgData.height/size;j++){
var color=getPxInfo(imgData,Math.floor(i*size+ Math.random()*size),Math.floor(j*size+Math.random()*size))
for(var a=0;a<size;a++){
for(var b=0;b<size;b++){
setPxInfo(imgData,i*size+a,j*size+b,color);
}
}
}
}
}
//获取像素点
function getPxInfo(imgData ,x, y){
var data=imgData.data;
var color=[];
color[0]=data[(y*imgData.width+x)*4];
color[1]=data[(y*imgData.width+x)*4+1];
color[2]=data[(y*imgData.width+x)*4+2];
color[3]=data[(y*imgData.width+x)*4+3];
return color;
}
//修改像素点
function setPxInfo(imgData,x,y,color){
var data=imgData.data;
data[(y*imgData.width+x)*4]=color[0];
data[(y*imgData.width+x)*4+1]=color[1];
data[(y*imgData.width+x)*4+2]=color[2];
data[(y*imgData.width+x)*4+3]=color[3];
}
}
</script>
</html>效果图：
