注意:谷歌下无问题,其他浏览器因跨域出错,暂未解决!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{
display: block;
border:2px solid blue;
margin:0 auto;
}
</style>
</head>
<body>
<canvas width="500" height="400" id="canvas"></canvas>
<canvas width="500" height="400" id="canvas1"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
var canvas1=document.getElementById('canvas1');
var cxt1=canvas1.getContext('2d');
var oimg=new Image();
oimg.src='./1.jpg';
oimg.onload=function(){
cxt.drawImage(this,0,0,500,400);
var imageData=cxt.getImageData(0,0,500,400);
//获取像素信息500*400=200000个像素
/*
x,y,color重要信息
* */
var num=40;
/*
* 马赛克
* 每十个像素点的r g b a都一样
* 0-10 r g b a都一样
* 11-20 r g b a都一样
* 21-30 r g b a都一样
* */
for(var i=0;i<imageData.data.length;i+=num) {
for(var j=1;j<num/4;j++){
imageData.data[i+4*j]=imageData.data[i];
imageData.data[i+1+4*j]=imageData.data[i+1];
imageData.data[i+2+4*j]=imageData.data[i+2];
imageData.data[i+3+4*j]=imageData.data[i+3];
}
}
cxt1.putImageData(imageData,0,0);//显示像素
//cxt1.drawImage(oimg,0,0,canvas.width,canvas.height);//画图片
//cxt1.drawImage(oimg,100,40,100,100,100,100,100,150);//截图
}
</script>
</body>
</html>