-
Notifications
You must be signed in to change notification settings - Fork 8
/
mosaic.html
131 lines (122 loc) · 5.66 KB
/
mosaic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: black;
}
canvas{
background-color: white;
}
</style>
<script type="text/javascript">
window.onload= function(){
var canvas = document.getElementById("vanvas1");
var context = canvas.getContext("2d");
var quan = 3; //马赛克的大小
var num = 9; //一次操作包含马赛克的个数
//创建image对象
var imgObj = new Image();
imgObj.crossOrigin = "Anonymous"; //用于解决图片跨域问题,但在chrome下依旧无效,建议起个node服务或者用safari打开
imgObj.src = 'timg.jpeg';
//待图片加载完后,将其显示在canvas上
imgObj.onload = function(){
context.drawImage(this, 0, 0,canvas.width,canvas.height);//this即是imgObj,保持图片的原始大小
start(this);
}
function start(obj){
//修改缓存
var lastImgArr = [];
canvas.onmousedown = function(ev){
//每次下笔前先保存
lastImgArr.push(context.getImageData(0,0,canvas.width,canvas.height));
var ev=ev || window.event;
var dx = ev.clientX-canvas.offsetLeft;
var dy = ev.clientY-canvas.offsetTop;
drawLine(obj,dx,dy);
document.onmousemove = function(ev){
var ev = ev || window.event;
var mx = ev.clientX-canvas.offsetLeft;
var my = ev.clientY-canvas.offsetTop;
if(Math.pow(dx-mx,2)+Math.pow(dy-my,2)>= Math.pow(quan*num,2)){ //(quan*马赛克个数*2)的平方
drawLine(obj,mx,my);
dx = mx;
dy = my;
}
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
}
//撤销修改
document.getElementById('revoked').onclick = function(){
if(lastImgArr && lastImgArr.length){
context.putImageData(lastImgArr.pop(), 0, 0);
}
}
}
function drawLine(obj,dx,dy){
//原始图像
var originalImgData = context.getImageData(0,0,canvas.width,canvas.height);
var originalPxData = originalImgData.data;
//用于循环修改
var modifyImgData = context.getImageData(0,0,canvas.width,canvas.height);
var modifyPxData = modifyImgData.data;
for(var i=dx-quan*num;i<dx+quan*num;i = i+2*quan+1){
for(var j=dy-quan*num;j<dy+quan*num;j = j+2*quan+1){
//中心点(dx,dy)
// if(Math.pow(i-dx,2)+Math.pow(j-dy,2) <= Math.pow(quan*num/2,2)){
if(!((i==dx-quan*num&&j==dy-quan*num)||(i==dx-quan*num&&j==dy-quan*num+2*quan+1)||
(i==dx-quan*num&&j==dy-quan*num+4*quan+2)||(i==dx-quan*num&&j==dy-quan*num+12*quan+6)||
(i==dx-quan*num&&j==dy-quan*num+14*quan+7)||(i==dx-quan*num&&j==dy-quan*num+16*quan+8)||
(i==dx-quan*num+16*quan+8&&j==dy-quan*num)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+2*quan+1)||
(i==dx-quan*num+16*quan+8&&j==dy-quan*num+4*quan+2)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+12*quan+6)||
(i==dx-quan*num+16*quan+8&&j==dy-quan*num+14*quan+7)||(i==dx-quan*num+16*quan+8&&j==dy-quan*num+16*quan+8)||
(i==dx-quan*num+2*quan+1&&j==dy-quan*num)||(i==dx-quan*num+4*quan+2&&j==dy-quan*num)||
(i==dx-quan*num+12*quan+6&&j==dy-quan*num)||(i==dx-quan*num+14*quan+7&&j==dy-quan*num)||
(i==dx-quan*num+2*quan+1&&j==dy-quan*num+16*quan+8)||(i==dx-quan*num+4*quan+2&&j==dy-quan*num+16*quan+8)||
(i==dx-quan*num+12*quan+6&&j==dy-quan*num+16*quan+8)||(i==dx-quan*num+14*quan+7&&j==dy-quan*num+16*quan+8))){
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*canvas.width+xx; //周围的元素。
sumR += originalPxData[pp*4+0];
sumG += originalPxData[pp*4+1];
sumB += originalPxData[pp*4+2];
}
}
var totlal = (2*quan+1)*(2*quan+1);
var avgR = sumR/totlal;
var avgG = sumG/totlal;
var avgB = sumB/totlal;
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*canvas.width+xx; //周围的元素。
modifyPxData[pp*4+0] = avgR;
modifyPxData[pp*4+1] = avgG;
modifyPxData[pp*4+2] = avgB;
}
}
}
}
}
context.putImageData(modifyImgData,0,0,0,0,canvas.width,canvas.height);
}
}
</script>
</head>
<body>
<canvas id="vanvas1" width="800" height="500"></canvas>
<button id='revoked'>撤销</button>
</body>
</html>