<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasMAP</title>
<style type="text/css">
#canvas1 {
border: 2px solid darkgoldenrod;
}
#canvas2 {
border: 2px solid darkgoldenrod;
}
</style>
</head>
<canvas id="canvas1" width="400" height="400"></canvas>
<canvas id="canvas2" width="400" height="400"></canvas>
<butoon id="btn">按钮 </butoon>
<button id="mohu">模糊</button>
<button id="mask">马赛克</button>
//<!--本身=(本身+周围)/总数
//本身=平均值-->
<body>
</body>
<script type="text/javascript">
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var context1 = canvas1.getContext("2d");
var context2 = canvas2.getContext("2d");
var cw = canvas1.width;
var ch = canvas2.height;
//模糊按钮
mohu.onclick = function() {
var xunhuanImgData = context1.getImageData(0, 0, 400, 400);
var xunhuanPxData = xunhuanImgData.data;
//循环的时候用来修改的
var xiugaiImgData = context1.getImageData(0, 0, 400, 400);
var xiugaiPxData = xiugaiImgData.data;
var quan = 10;
for(var i = quan; i < cw - quan; i++) {
for(var j = quan; j < ch - quan; j++) {
var p = j * cw + i;
var sumR = 0;
var sumG = 0;
var sumB = 0;
for(var x = -quan; x <= quan; x++) {
for(var y = -quan; y <= quan; y++) {
var xx = i + x;
var yy = j + y;
var pp = yy * cw + xx;
sumR += xunhuanPxData[pp * 4 + 0];
sumG += xunhuanPxData[pp * 4 + 1];
sumB += xunhuanPxData[pp * 4 + 2];
}
}
var totla1 = (2 * quan + 1) * (2 * quan + 1);
var avgR = sumR / totla1;
var avgG = sumG / totla1;
var avgB = sumB / totla1;
var p = j * cw + i;
xiugaiPxData[p * 4 + 0] = avgR;
xiugaiPxData[p * 4 + 1] = avgG;
xiugaiPxData[p * 4 + 2] = avgB;
}
}
context2.putImageData(xiugaiImgData, 0, 0, 0, 0, 400, 400);
}
//马赛克按钮
mask.onclick = function() {
var xunhuanImgData = context1.getImageData(0, 0, 400, 400);
var xunhuanPxData = xunhuanImgData.data;
//循环的时候用来修改的
var xiugaiImgData = context1.getImageData(0, 0, 400, 400);
var xiugaiPxData = xiugaiImgData.data;
var quan = 5;
for(var i = 50; i < 200; i = i + 2 * quan + 1) {
for(var j = 50; j < 200; j = j + 2 * quan + 1) {
var p = j * cw + i;
var sumR = 0;
var sumG = 0;
var sumB = 0;
for(var x = -quan; x <= quan; x++) {
for(var y = -quan; y <= quan; y++) {
var xx = i + x;
var yy = j + y;
var pp = yy * cw + xx;
sumR += xunhuanPxData[pp * 4 + 0];
sumG += xunhuanPxData[pp * 4 + 1];
sumB += xunhuanPxData[pp * 4 + 2];
}
}
var totla1 = (2 * quan + 1) * (2 * quan + 1);
var avgR = sumR / totla1;
var avgG = sumG / totla1;
var avgB = sumB / totla1;
for(var x = -quan; x <= quan; x++) {
for(var y = -quan; y <= quan; y++) {
var xx = i + x;
var yy = j + y;
var pp = yy * cw + xx;
xiugaiPxData[pp * 4 + 0] = avgR;
xiugaiPxData[pp * 4 + 1] = avgG;
xiugaiPxData[pp * 4 + 2] = avgB;
xiugaiPxData[pp * 4 + 3] = 122;
}
}
}
}
context2.putImageData(xiugaiImgData, 0, 0, 0, 0, 400, 400);
}
var fengjing = new Image();
fengjing.src = "img/fengjing.jpg";
fengjing.onload = function() {
context1.drawImage(this, 0, 0, 400, 400);
}
btn.onclick = function() {
//获取cavas1 中的图片数据 (imgdate)
var imgDate = context1.getImageData(0, 0, 400, 400);
//从 imgdate 中获取像素数据 (pxDAte)
var pxDate = imgDate.data;
var cw = 400;
var ch = 400;
// 修改像素
for(var i = 0; i < cw; i++) {
for(var j = 0; j < ch; j++) {
var p = (j * cw) + i;
pxDate[i * 4 + 0] = 255;
var x = Math.random();
if(x < 0.1) {
pxDate[p * 4 + 0] = 255;
pxDate[p * 4 + 0] = 255;
pxDate[p * 4 + 0] = 255;
}
}
} // 把修改之后的结果绘制到canvas2中
context2.putImageData(imgDate, 0, 0, 0, 0, 400, 400);
}
</script>
</html>
