-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlowpoly.html
120 lines (101 loc) · 3.62 KB
/
lowpoly.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 100px;
line-height: 100px;
}
canvas {
float: left;
width: 320px;
height: 480px;
}
</style>
</head>
<body>
<div class="header"></div>
<script src="filter-sobel.js"></script>
<script src="delaunay.js"></script>
<script>
(function () {
function Canvas() {
var canvas = document.createElement( "canvas" );
canvas.width = 320;
canvas.height = 480;
return canvas;
}
function getPoint( imgdata, w, h ) {
var result = [];
var pre = 0;
for ( var y = 0; y < h; y += 10 ) {
for ( var x = 0; x < w; ) {
var index = (y * w + x) * 4;
var cur = imgdata[index] + imgdata[index + 1] + imgdata[index + 2];
if ( cur > 150 && Math.abs( cur - pre ) > 120 ) {
result.push( [x, y] );
pre = cur;
x += 10;
}
else {
x += 1;
}
}
}
return result;
}
var img = new Image();
img.src = "img/h6.jpg";
img.onload = function () {
var ocanvas = Canvas();
var ogc = ocanvas.getContext( "2d" );
ogc.drawImage( img, 0, 0 );
var ogcdata = ogc.getImageData( 0, 0, 320, 480 );
document.body.appendChild( ocanvas );
var scanvas = Canvas();
document.body.appendChild( scanvas );
var sgc = scanvas.getContext( "2d" );
sgc.putImageData( Sobel( ogcdata ), 0, 0 );
var point = getPoint( sgc.getImageData( 0, 0, 320, 480 ).data, 320, 480 );
console.log( point.length );
var xcanvas = Canvas();
var xgc = xcanvas.getContext( "2d" );
document.body.appendChild( xcanvas );
xgc.putImageData( sgc.getImageData( 0, 0, 320, 480 ), 0, 0 );
xgc.fillStyle = "red";
var i;
for ( i = 0; i < point.length; i++ ) {
xgc.fillRect( point[i][0], point[i][1], 4, 4 );
}
var lcanvas = Canvas();
var lgc = lcanvas.getContext( "2d" );
document.body.appendChild( lcanvas );
lgc.lineWidth = 1;
var line = delaunay.triangulate( point );
for ( i = 0; i < line.length; i += 3 ) {
lgc.beginPath();
var x = point[line[i]][0], y = point[line[i]][1];
lgc.moveTo( x, y );
lgc.lineTo( point[line[i + 1]][0], point[line[i + 1]][1] );
lgc.lineTo( point[line[i + 2]][0], point[line[i + 2]][1] );
lgc.closePath();
var my = ((y + point[line[i + 1]][1] + point[line[i + 2]][1]) / 3) << 0;
var mx = ((x + point[line[i + 1]][0] + point[line[i + 2]][0]) / 3) << 0;
var oindex = (my * 320 + mx) * 4;
lgc.strokeStyle = "rgba(" + ogcdata.data[oindex] + "," + ogcdata.data[oindex + 1] + "," + ogcdata.data[oindex + 2] + ",1)";
lgc.fillStyle = "rgba(" + ogcdata.data[oindex] + "," + ogcdata.data[oindex + 1] + "," + ogcdata.data[oindex + 2] + ",1)";
lgc.stroke();
lgc.fill();
}
};
})();
</script>
</body>
</html>