mightyscape-1.2/extensions/fablabchemnitz/imagetracerjs/imagetracerjs-master/simplify_interop.html

127 lines
4.0 KiB
HTML
Raw Normal View History

2022-10-03 02:49:07 +02:00
<!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>