334 lines
12 KiB
HTML
334 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html><head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>imagetracer.js test automation</title>
|
||
|
|
<style>
|
||
|
|
.imgcontainer{
|
||
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQImWPQ1tb+r62t/d/f3/+/v7//fwYMARgDJoEhAACRARthAfQS8AAAAABJRU5ErkJggg==) repeat;
|
||
|
|
border: solid 1px cyan;
|
||
|
|
}
|
||
|
|
table{ border: solid 1px gray; border-collapse:collapse; }
|
||
|
|
td{ border: solid 1px gray; vertical-align:top; }
|
||
|
|
th{ border: solid 1px gray; }
|
||
|
|
</style>
|
||
|
|
<script src="imagetracer_v1.2.6.js"></script>
|
||
|
|
<script>
|
||
|
|
var queue;
|
||
|
|
var stats = [], tt, rt;
|
||
|
|
var timeoutid = 0, timeoutwait = 500, drawmode = false, rowid = 1, repeatnum = 1, totaltime;
|
||
|
|
|
||
|
|
function log(msg){ console.log(msg); }
|
||
|
|
|
||
|
|
function startprocess(){
|
||
|
|
|
||
|
|
if(!timeoutid){
|
||
|
|
|
||
|
|
log('starting');
|
||
|
|
|
||
|
|
var filenames = [];
|
||
|
|
|
||
|
|
// Drawmode
|
||
|
|
if(document.getElementById('cbox0').checked){ drawmode = true; }else{ drawmode = false; }
|
||
|
|
|
||
|
|
// Selected images
|
||
|
|
for(var i=1; i<17; i++){ if(document.getElementById('icb'+i).checked){ filenames.push("testimages/"+i+".png"); } }
|
||
|
|
|
||
|
|
// Repeats
|
||
|
|
repeatnum = 1;
|
||
|
|
try{ repeatnum = parseInt(email = document.getElementById('repeatinput').value); }catch(e){log(e);}
|
||
|
|
|
||
|
|
// Options
|
||
|
|
var optionses = [], ks = Object.keys(ImageTracer.optionpresets);
|
||
|
|
for(var i=0; i<ks.length; i++){
|
||
|
|
if(document.getElementById('ocb'+i).checked){ optionses.push(ImageTracer.optionpresets[ks[i]]); }
|
||
|
|
}
|
||
|
|
/*if(document.getElementById('ocb1').checked){ optionses.push({}); }
|
||
|
|
if(document.getElementById('ocb2').checked){ optionses.push({ blurradius:2, ltres:0.1, numberofcolors:64 }); }
|
||
|
|
if(document.getElementById('ocb3').checked){ optionses.push({ strokewidth:4, blurradius:5, roundcoords:0, desc:false, scale:4, }); }
|
||
|
|
*/
|
||
|
|
if(document.getElementById('ocbx').checked){
|
||
|
|
try{
|
||
|
|
optionses.push( JSON.parse( document.getElementById('custom1input').value ) );
|
||
|
|
}catch(e){ log(e); }
|
||
|
|
}
|
||
|
|
if(document.getElementById('ocby').checked){
|
||
|
|
try{
|
||
|
|
optionses.push( JSON.parse( document.getElementById('custom2input').value ) );
|
||
|
|
}catch(e){ log(e); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// Queue
|
||
|
|
queue = [];
|
||
|
|
for(var k=0; k<repeatnum; k++){
|
||
|
|
for(var i=0; i<filenames.length; i++){
|
||
|
|
for(var j=0; j<optionses.length; j++){
|
||
|
|
queue.push([filenames[i],optionses[j]]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Processing
|
||
|
|
totaltime = Date.now();
|
||
|
|
processqueue();
|
||
|
|
}
|
||
|
|
}// End of startprocess()
|
||
|
|
|
||
|
|
function processqueue(){
|
||
|
|
|
||
|
|
var item = queue.shift();
|
||
|
|
if(item){
|
||
|
|
|
||
|
|
log('file '+item[0]);
|
||
|
|
|
||
|
|
ImageTracer.loadImage(item[0],
|
||
|
|
function(canvas){
|
||
|
|
|
||
|
|
// Start tracing timer
|
||
|
|
tt = Date.now();
|
||
|
|
var tracedata = ImageTracer.imagedataToTracedata( ImageTracer.getImgdata(canvas), item[1] );
|
||
|
|
// Stop tracing timer
|
||
|
|
tt = Date.now() - tt;
|
||
|
|
|
||
|
|
// Start rendering timer
|
||
|
|
rt = Date.now();
|
||
|
|
// Render
|
||
|
|
var svgstr = ImageTracer.getsvgstring(tracedata, item[1]);
|
||
|
|
// Stop rendering timer
|
||
|
|
rt = Date.now() - rt;
|
||
|
|
|
||
|
|
// Counting paths
|
||
|
|
var pcont = 0;
|
||
|
|
for(k in tracedata.layers) {
|
||
|
|
if(!tracedata.layers.hasOwnProperty(k)){ continue; }
|
||
|
|
pcont += tracedata.layers[k].length;
|
||
|
|
}
|
||
|
|
|
||
|
|
////////////////
|
||
|
|
|
||
|
|
// Draw SVG
|
||
|
|
if(drawmode){
|
||
|
|
document.getElementById('svgcontainer').innerHTML = '';
|
||
|
|
ImageTracer.appendSVGString(svgstr,'svgcontainer');
|
||
|
|
|
||
|
|
// Draw diff
|
||
|
|
// draw original
|
||
|
|
var oc = document.getElementById('originalcanvas'); oc.innerHTML = '';
|
||
|
|
oc.width = canvas.width;
|
||
|
|
oc.height = canvas.height;
|
||
|
|
var ctx = oc.getContext('2d');
|
||
|
|
var oimgd = ImageTracer.getImgdata(canvas);
|
||
|
|
ctx.putImageData(oimgd,0,0);
|
||
|
|
|
||
|
|
// draw new
|
||
|
|
backtopng(svgstr,
|
||
|
|
function(imgd){
|
||
|
|
|
||
|
|
// draw diff
|
||
|
|
var dc = document.getElementById('diffcanvas'); dc.innerHTML = '';
|
||
|
|
dc.width = imgd.width;
|
||
|
|
dc.height = imgd.height;
|
||
|
|
var dctx = dc.getContext('2d');
|
||
|
|
var idx = 0, d = 0;
|
||
|
|
var rgbadiff=0, pixeldiff=0, thisdiff=0;
|
||
|
|
// Calculating RGBA diff
|
||
|
|
var dimgd = dctx.createImageData(imgd.width,imgd.height);
|
||
|
|
for(var j=0; j<imgd.height; j++){
|
||
|
|
for(var i=0; i<imgd.width; i++){
|
||
|
|
idx = (j*imgd.width + i) * 4;
|
||
|
|
dimgd.data[idx ] = Math.abs( oimgd.data[idx ] - imgd.data[idx ] );
|
||
|
|
dimgd.data[idx+1] = Math.abs( oimgd.data[idx+1] - imgd.data[idx+1] );
|
||
|
|
dimgd.data[idx+2] = Math.abs( oimgd.data[idx+2] - imgd.data[idx+2] );
|
||
|
|
dimgd.data[idx+3] = Math.abs( oimgd.data[idx+3] - imgd.data[idx+3] );
|
||
|
|
thisdiff = dimgd.data[idx ] + dimgd.data[idx+1] + dimgd.data[idx+2] + dimgd.data[idx+3];
|
||
|
|
if(thisdiff === 0 ){ dimgd.data[idx+3] = 0; }else{ dimgd.data[idx+3] = 255; pixeldiff++; }
|
||
|
|
rgbadiff += thisdiff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
dctx.putImageData( dimgd, 0, 0 );
|
||
|
|
|
||
|
|
// Registerstats
|
||
|
|
registerstats(
|
||
|
|
item[0],
|
||
|
|
tracedata.width,
|
||
|
|
tracedata.height,
|
||
|
|
(tracedata.width*tracedata.height),
|
||
|
|
svgstr.length,
|
||
|
|
tt,
|
||
|
|
rt,
|
||
|
|
pcont,
|
||
|
|
rgbadiff / ( tracedata.width * tracedata.height * 4 ),
|
||
|
|
Math.floor(pixeldiff*100 / ( tracedata.width * tracedata.height )),
|
||
|
|
JSON.stringify(item[1])
|
||
|
|
);
|
||
|
|
|
||
|
|
// Next item
|
||
|
|
timeoutid = setTimeout( processqueue, timeoutwait );
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}else{// No drawmode
|
||
|
|
|
||
|
|
// Registerstats
|
||
|
|
registerstats(
|
||
|
|
item[0],
|
||
|
|
tracedata.width,
|
||
|
|
tracedata.height,
|
||
|
|
(tracedata.width*tracedata.height),
|
||
|
|
svgstr.length,
|
||
|
|
tt,
|
||
|
|
rt,
|
||
|
|
pcont,
|
||
|
|
'n/a',
|
||
|
|
'n/a',
|
||
|
|
JSON.stringify(item[1])
|
||
|
|
);
|
||
|
|
|
||
|
|
// Next item
|
||
|
|
timeoutid = setTimeout( processqueue, timeoutwait );
|
||
|
|
|
||
|
|
}// End of drawmode check
|
||
|
|
|
||
|
|
}// End of loadImage() callback
|
||
|
|
);// End of loadImage()
|
||
|
|
|
||
|
|
}else{// No more images to process
|
||
|
|
|
||
|
|
stopprocessing();
|
||
|
|
//document.getElementById('logdiv').innerHTML += JSON.stringify(stats);
|
||
|
|
|
||
|
|
}// End of item check
|
||
|
|
|
||
|
|
}// End of processqueue()
|
||
|
|
|
||
|
|
function stopprocessing(){
|
||
|
|
clearTimeout(timeoutid); timeoutid = 0;
|
||
|
|
totaltime = Date.now() - totaltime;
|
||
|
|
alert('Time elapsed: '+totaltime+' ms.');
|
||
|
|
}
|
||
|
|
|
||
|
|
function registerstats(filename,w,h,area,svglength,tracetime,rendertime,pathcnt,rgbadiff,pixeldiff,options){
|
||
|
|
var tableref = document.getElementById('logtable');
|
||
|
|
var newrow = tableref.insertRow(-1);
|
||
|
|
newrow.innerHTML =
|
||
|
|
'<td>'+rowid+'</td>'+
|
||
|
|
'<td>'+filename+'</td>'+
|
||
|
|
'<td>'+w+'</td>'+
|
||
|
|
'<td>'+h+'</td>'+
|
||
|
|
'<td>'+area+'</td>'+
|
||
|
|
'<td>'+svglength+'</td>'+
|
||
|
|
'<td>'+tracetime+'</td>'+
|
||
|
|
'<td>'+rendertime+'</td>'+
|
||
|
|
'<td>'+pathcnt+'</td>'+
|
||
|
|
'<td>'+rgbadiff+'</td>'+
|
||
|
|
'<td>'+pixeldiff+'</td>'+
|
||
|
|
'<td>'+options+'</td>';
|
||
|
|
rowid++;
|
||
|
|
}
|
||
|
|
|
||
|
|
function backtopng(svgstr,callback){
|
||
|
|
var nc = document.getElementById('newcanvas'); nc.innerHTML = '';
|
||
|
|
var img = document.createElement('img');
|
||
|
|
img.onload = function(){
|
||
|
|
nc.width=img.width;
|
||
|
|
nc.height=img.height;
|
||
|
|
var ctx = nc.getContext('2d');
|
||
|
|
ctx.drawImage( img, 0, 0 );
|
||
|
|
callback(ImageTracer.getImgdata(nc));
|
||
|
|
};
|
||
|
|
img.setAttribute('src','data:image/svg+xml;base64,'+btoa(svgstr));
|
||
|
|
}
|
||
|
|
|
||
|
|
function onload_init(){
|
||
|
|
|
||
|
|
var k = Object.keys(ImageTracer.optionpresets), s='';
|
||
|
|
for(var i=0; i<k.length; i++){
|
||
|
|
s += '<label><input type="checkbox" id="ocb'+i+'" value="1" '+(i<6?'checked="true"':'')+' ><b>'+k[i]+'</b> : '+JSON.stringify(ImageTracer.optionpresets[k[i]])+'</label><br/>';
|
||
|
|
}
|
||
|
|
document.getElementById('ocbcontainer').innerHTML = s;
|
||
|
|
}
|
||
|
|
|
||
|
|
</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>
|
||
|
|
<form id="testcontroller">
|
||
|
|
<h1>Test images</h1>
|
||
|
|
<table id="itable">
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><label><input type="checkbox" id="icb1" value="1" checked="true">1.png</label><br><img src="testimages/1.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb2" value="1" checked="true" >2.png</label><br><img src="testimages/2.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb3" value="1" checked="true" >3.png</label><br><img src="testimages/3.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb4" value="1" checked="true" >4.png</label><br><img src="testimages/4.png"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><label><input type="checkbox" id="icb5" value="1" checked="true" >5.png</label><br><img src="testimages/5.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb6" value="1" checked="true" >6.png</label><br><img src="testimages/6.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb7" value="1" checked="true" >7.png</label><br><img src="testimages/7.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb8" value="1" checked="true" >8.png</label><br><img src="testimages/8.png"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><label><input type="checkbox" id="icb9" value="1" checked="true" >9.png</label><br><img src="testimages/9.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb10" value="1" checked="true" >10.png</label><br><img src="testimages/10.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb11" value="1" checked="true" >11.png</label><br><img src="testimages/11.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb12" value="1" checked="true" >12.png</label><br><img src="testimages/12.png"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><label><input type="checkbox" id="icb13" value="1" checked="true" >13.png</label><br><img src="testimages/13.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb14" value="1" checked="true" >14.png</label><br><img src="testimages/14.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb15" value="1" checked="true" >15.png</label><br><img src="testimages/15.png"></td>
|
||
|
|
<td><label><input type="checkbox" id="icb16" value="1" checked="true" >16.png</label><br><img src="testimages/16.png"></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<h1>Settings</h1>
|
||
|
|
<label><input type="checkbox" id="cbox0" value="1" checked="true">Draw SVG</label><br>
|
||
|
|
<div id="ocbcontainer"></div>
|
||
|
|
<label><input type="checkbox" id="ocbx" value="1" >Custom Options 1:</label><input type="text" id="custom1input" value="" style="width:40em" ><br>
|
||
|
|
<label><input type="checkbox" id="ocby" value="1" >Custom Options 2:</label><input type="text" id="custom2input" value="" style="width:40em" ><br>
|
||
|
|
Example Custom Options:<br>{"ltres":1,"qtres":1,"pathomit":8,"colorsampling":true,"numberofcolors":16,"mincolorratio":0.02,"colorquantcycles":3,"scale":1,"simplifytolerance":0,"roundcoords":1,"lcpr":0,"qcpr":0,"desc":true,"viewbox":false,"blurradius":0,"blurdelta":20}<br>
|
||
|
|
<label><input type="text" id="repeatinput" value="1">Repeats</label><br>
|
||
|
|
<button id="startbutton" type="button" onclick="startprocess()" >START</button>
|
||
|
|
<button id="stopbutton" type="button" onclick="stopprocessing()" >STOP</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<h1>Result (if Draw SVG is active)</h1>
|
||
|
|
<table id="itable">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Traced SVG</th><th>Original raster</th><th>SVG rendered as raster</th><th>Difference</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><div id="svgcontainer" class="imgcontainer"></div></td>
|
||
|
|
<td><canvas id="originalcanvas" class="imgcontainer"></canvas></td>
|
||
|
|
<td><canvas id="newcanvas" class="imgcontainer"></canvas></td>
|
||
|
|
<td><canvas id="diffcanvas" class="imgcontainer"></canvas></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h1>Measurements</h1>
|
||
|
|
<div id="logdiv">
|
||
|
|
<table id="logtable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>RowID</th>
|
||
|
|
<th>Filename</th>
|
||
|
|
<th>width (pixels)</th>
|
||
|
|
<th>height (pixels)</th>
|
||
|
|
<th>area (pixels)</th>
|
||
|
|
<th>SVG string length (bytes)</th>
|
||
|
|
<th>Tracing time (ms)</th>
|
||
|
|
<th>Rendering time (ms)</th>
|
||
|
|
<th>Nr. of paths</th>
|
||
|
|
<th>RGBA difference (cummulative RGBA difference / (area*4))</th>
|
||
|
|
<th>Different pixels (%)</th>
|
||
|
|
<th>Options</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="logtbody">
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body></html>
|