<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0; padding: 0;}
body{ background: #333;}
canvas{ display: block; margin: 50px auto; background: #fff;}
</style>
</head>
<body>
<canvas width="850" height="840" id="canvas"></canvas>
<script>
var oImg = new Image();
oImg.src="images/2.jpg";
oImg.width = 850;
oImg.height = 420;
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.drawImage(oImg,0,0,850,420);
var w = oImg.width;
var h = oImg.height;
var rectWidth = 10; //定义马赛克矩形宽10px
function setMask(x,y){
var x1 = getNum(x,x+rectWidth);
var y1 = getNum(y,y+rectWidth);
var imgData = cxt.getImageData(0,0,w,h);
var color = getXY(imgData,x1,y1);
var newImgData = cxt.createImageData(rectWidth,rectWidth);
for (var i=y; i<y+rectWidth;i++){
for (var j=x; j<x+rectWidth; j++){
setXY(newImgData,j,i,[255,255,255,255]);
// console.log(newImgData.data);
}
}
cxt.putImageData(newImgData,x,y);
}
setMask(100,133);
}
function getXY(obj,i,j){
var w =obj.width;
var h = obj.height;
var data = obj.data;
var color =[];
color[0] = data[4*(w*j+i)+0];
color[1] = data[4*(w*j+i)+1];
color[2] = data[4*(w*j+i)+2];
color[3] = data[4*(w*j+i)+3];
return color;
}
function setXY(obj,i,j,color){
var w = obj.width;
var h = obj.height;
var data = obj.data;
data[4*(w*j+i)+0] = color[0] ;
data[4*(w*j+i)+1] = color[1];
data[4*(w*j+i)+2] = color[2];
data[4*(w*j+i)+3] = color[3];
}
function getNum(num1,num2){
return Math.ceil(Math.random()*(num2-num1))+num1;
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0; padding: 0;}
body{ background: #333;}
canvas{ display: block; margin: 50px auto; background: #fff;}
</style>
</head>
<body>
<canvas width="850" height="840" id="canvas"></canvas>
<script>
var oImg = new Image();
oImg.src="images/2.jpg";
oImg.width = 850;
oImg.height = 420;
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.drawImage(oImg,0,0,850,420);
var w = oImg.width;
var h = oImg.height;
var rectWidth = 10; //定义马赛克矩形宽10px
function setMask(x,y){
var x1 = getNum(x,x+rectWidth);
var y1 = getNum(y,y+rectWidth);
var imgData = cxt.getImageData(0,0,w,h);
var color = getXY(imgData,x1,y1);
var newImgData = cxt.createImageData(rectWidth,rectWidth);
for (var i=y; i<y+rectWidth;i++){
for (var j=x; j<x+rectWidth; j++){
setXY(newImgData,j,i,[255,255,255,255]);
// console.log(newImgData.data);
}
}
cxt.putImageData(newImgData,x,y);
}
setMask(100,133);
}
function getXY(obj,i,j){
var w =obj.width;
var h = obj.height;
var data = obj.data;
var color =[];
color[0] = data[4*(w*j+i)+0];
color[1] = data[4*(w*j+i)+1];
color[2] = data[4*(w*j+i)+2];
color[3] = data[4*(w*j+i)+3];
return color;
}
function setXY(obj,i,j,color){
var w = obj.width;
var h = obj.height;
var data = obj.data;
data[4*(w*j+i)+0] = color[0] ;
data[4*(w*j+i)+1] = color[1];
data[4*(w*j+i)+2] = color[2];
data[4*(w*j+i)+3] = color[3];
}
function getNum(num1,num2){
return Math.ceil(Math.random()*(num2-num1))+num1;
}
</script>
</body>
</html>
