-
Notifications
You must be signed in to change notification settings - Fork 171
/
simplify_interop.html
126 lines (86 loc) · 4.02 KB
/
simplify_interop.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="imagetracer_v1.2.6.js"></script>
<script src="simplify.js"></script>
<script>
function onload_init(){
var options = { ltres:0.1, qtres:1, scale:4, strokewidth:4 };
// This will load an image, trace it when loaded, and execute callback on the tracedata
ImageTracer.imageToTracedata(
'panda.png',
function(tracedata){
// Counting total original points; copying and simplifying points in newpointscontainer
var pointcnt = 0, newpointscontainer = [];
// layers loop
for(var i=0; i<tracedata.layers.length; i++){
newpointscontainer[i] = [];
// paths loop
for(var j=0; j<tracedata.layers[i].length; j++){
newpointscontainer[i][j] = [];
// register first point
newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[0].x1, y: tracedata.layers[i][j].segments[0].y1 });
// segments loop
for(var k=0; k<tracedata.layers[i][j].segments.length; k++){
// register next point
newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[k].x2, y: tracedata.layers[i][j].segments[k].y2 });
pointcnt++;
if(tracedata.layers[i][j].segments[k].hasOwnProperty('x3')){
// register next point
newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[k].x3, y: tracedata.layers[i][j].segments[k].y3 });
pointcnt++;
}// End of x3 check
}// End of segments loop
// simplify with tolerance = 2 ; highQuality = true
newpointscontainer[i][j] = simplify(newpointscontainer[i][j], 2, true);
}// End of paths loop
}// End of layers loop
// log original SVG stats
document.getElementById('log').innerHTML += 'Original point count: '+pointcnt+'<br/>';
// display original SVG
ImageTracer.appendSVGString( ImageTracer.getsvgstring(tracedata,options), 'svgcontainer' );
// Copying the new, simplified points back to tracedata
// As we don't know how and which segment is affected,
// whether quadratic spline controlpoints or endpoints were deleted,
// we will just assume everything is linear, no quadratic splines will be used
pointcnt = 0;
// layers loop
for(var i=0; i<tracedata.layers.length; i++){
// paths loop
for(var j=0; j<tracedata.layers[i].length; j++){
// reset this path segments
tracedata.layers[i][j].segments = [];
// count new points
pointcnt += newpointscontainer[i][j].length;
// segments loop
for(var k=0; k<newpointscontainer[i][j].length; k++){
// create new segments from new points
tracedata.layers[i][j].segments.push(
{
type:'L',
x1: newpointscontainer[i][j][k].x,
y1: newpointscontainer[i][j][k].y,
x2: newpointscontainer[i][j][(k+1)%newpointscontainer[i][j].length].x,
y2: newpointscontainer[i][j][(k+1)%newpointscontainer[i][j].length].y
}
);
}// End of segments loop
if(j===0){ console.log(JSON.stringify(tracedata.layers[i][j].segments)); }
}// End of paths loop
}// End of layers loop
// log new SVG stats
document.getElementById('log').innerHTML += 'New point count: '+pointcnt+'<br/>';
// display new SVG
ImageTracer.appendSVGString( ImageTracer.getsvgstring(tracedata,options), 'svgcontainer' );
},// End of imageToTracedata() callback
options // for tracing
);// End of imageToTracedata()
}// End of onload_init()
</script>
</head>
<body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
<div id="svgcontainer"></div> <div id="log"></div>
</body>
</html>