127 lines
4.0 KiB
HTML
127 lines
4.0 KiB
HTML
|
<!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>
|