├── .eslintrc.json
├── .project
├── .settings
    ├── .jsdtscope
    ├── org.eclipse.wst.jsdt.ui.superType.container
    └── org.eclipse.wst.jsdt.ui.superType.name
├── LICENSE
├── README.md
├── bower.json
├── docimages
    ├── cover_problem.png
    ├── option_presets.png
    ├── option_presets_small.png
    ├── s1.png
    ├── s10.png
    ├── s11.png
    ├── s12.png
    ├── s13.png
    ├── s14.png
    ├── s15.png
    ├── s2.png
    ├── s3.png
    ├── s4.png
    ├── s7.png
    ├── s8.png
    ├── s9.png
    └── transparency_problem.png
├── imagetracer_examples.html
├── imagetracer_options_gallery.html
├── imagetracer_test_automation.html
├── imagetracer_v1.2.6.js
├── nodecli
    ├── PNG.js
    ├── PNGReader.js
    ├── READTHIS.md
    └── nodecli.js
├── options.md
├── package.json
├── panda.png
├── process_overview.md
├── simplify_interop.html
├── smiley.png
├── smileyRGB.png
├── testimages
    ├── 1.png
    ├── 10.png
    ├── 11.png
    ├── 12.png
    ├── 13.png
    ├── 14.png
    ├── 15.png
    ├── 16.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── 6.png
    ├── 7.png
    ├── 8.png
    ├── 9.png
    └── combined.png
└── version_history.md


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true
 4 |     },
 5 |     "extends": "eslint:recommended",
 6 |     "rules": {
 7 |         "indent": [
 8 |             2,
 9 |             "tab"
10 |         ],
11 |         "linebreak-style": [
12 |             2,
13 |             "windows"
14 |         ],
15 |         "quotes": [
16 |             2,
17 |             "single"
18 |         ],
19 |         "semi": [
20 |             2,
21 |             "always"
22 |         ]
23 |     }
24 | }


--------------------------------------------------------------------------------
/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>imagetracerjs</name>
 4 | 	<comment></comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 	</buildSpec>
14 | 	<natures>
15 | 		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
16 | 	</natures>
17 | </projectDescription>
18 | 


--------------------------------------------------------------------------------
/.settings/.jsdtscope:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <classpath>
3 | 	<classpathentry excluding="**/bower_components/*|**/node_modules/*|**/*.min.js" kind="src" path=""/>
4 | 	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
5 | 	<classpathentry kind="output" path=""/>
6 | </classpath>
7 | 


--------------------------------------------------------------------------------
/.settings/org.eclipse.wst.jsdt.ui.superType.container:
--------------------------------------------------------------------------------
1 | org.eclipse.wst.jsdt.launching.JRE_CONTAINER


--------------------------------------------------------------------------------
/.settings/org.eclipse.wst.jsdt.ui.superType.name:
--------------------------------------------------------------------------------
1 | Global


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # imagetracerjs
  2 | ![alt Bitmap to Svg](docimages/s1.png)
  3 | 
  4 | Simple raster image tracer and vectorizer written in JavaScript.
  5 | 
  6 | ---
  7 | 
  8 | ## Table of contents
  9 | - [Getting started](#getting-started)
 10 | - [News](#news)
 11 | - [API](#api)
 12 | - [Options](#options)
 13 | - [Examples](#examples)
 14 | - [InkScape extension](#inkscape-extension)
 15 | - [Process overview](#process-overview)
 16 | - [License](#license)
 17 | 
 18 | ---
 19 | 
 20 | ## Getting started
 21 | 
 22 | ### Using in the Browser
 23 | Include the script:
 24 | ```javascript
 25 | <script src="imagetracer_v1.2.6.js"></script>
 26 | ```
 27 | Then:
 28 | ```javascript
 29 | // Loading an image, tracing with the 'posterized2' option preset, and appending the SVG to an element with id="svgcontainer"
 30 | ImageTracer.imageToSVG(
 31 | 
 32 | 	'panda.png', /* input filename / URL */
 33 | 	
 34 | 	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); }, /* callback function to run on SVG string result */
 35 | 	
 36 | 	'posterized2' /* Option preset */
 37 | 	
 38 | );
 39 | ```
 40 | 
 41 | ### Using with Node.js
 42 | 
 43 | Node.js Command line interface example:
 44 | 
 45 | ```
 46 | imagetracerjs/nodecli>node nodecli ../panda.png outfilename panda.svg scale 10
 47 | ```
 48 | 
 49 | Expected result:
 50 | 
 51 | ```
 52 | imagetracerjs/nodecli/panda.svg was saved!
 53 | ```
 54 | 
 55 | ---
 56 | 
 57 | ## News
 58 | 
 59 | ### 1.2.6
 60 |  - NEW: [InkScape extension](#inkscape-extension)
 61 |  - FIXED: hole shape parent search (Issues #31 #39)
 62 |  - FIXED: Handle (absolute) paths in CLI correctly Issue #42
 63 | 
 64 | ### 1.2.5
 65 |  - RGBA ImageData check in colorquantization(), solving Issue #24 and #18
 66 | 
 67 | ### 1.2.4
 68 |  - ```options.layering``` : default 0 = sequential, new method ; 1 = parallel, old method. (Enhancement Issue #17)
 69 |  - case insensitive option preset names
 70 |  - README.md reorganizing
 71 | 
 72 | [Version history](https://github.com/jankovicsandras/imagetracerjs/blob/master/version_history.md)
 73 | 
 74 | ---
 75 | 
 76 | ## API
 77 | |Function name|Arguments|Returns|Run type|
 78 | |-------------|---------|-------|--------|
 79 | |```imageToSVG```|```image_url /*string*/ , callback /*function*/ , options /*optional object or preset name*/```|Nothing, ```callback(svgstring)``` will be executed|Asynchronous, Browser only|
 80 | |```imagedataToSVG```|```imagedata /*object*/ , options /*optional object or preset name*/```|```svgstring /*string*/```|Synchronous, Browser & Node.js|
 81 | |```imageToTracedata```|```image_url /*string*/ , callback /*function*/ , options /*optional object or preset name*/```|Nothing, ```callback(tracedata)``` will be executed|Asynchronous, Browser only|
 82 | |```imagedataToTracedata```|```imagedata /*object*/ , options /*optional object or preset name*/```|```tracedata /*object*/```|Synchronous, Browser & Node.js|
 83 | 
 84 | ```imagedata``` is standard [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) here, ```canvas``` is [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) .
 85 | 
 86 | ### Helper Functions (Browser only)
 87 | |Function name|Arguments|Returns|Run type|
 88 | |-------------|---------|-------|--------|
 89 | |```appendSVGString```|```svgstring /*string*/, parentid /*string*/```|Nothing, an SVG will be appended to the container DOM element with id=parentid.|Synchronous, Browser only|
 90 | |```loadImage```|```url /*string*/, callback /*function*/```|Nothing, loading an image from a URL, then executing ```callback(canvas)```|Asynchronous, Browser only|
 91 | |```getImgdata```|```canvas /*object*/```|```imagedata /*object*/```|Synchronous, Browser only|
 92 | 
 93 | ```imagedata``` is standard [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) here, ```canvas``` is [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) .
 94 | There are more functions for advanced users, read the source if you are interested. :)
 95 | 
 96 | "Browser only" means that Node.js doesn't have built-in canvas and DOM support as of 2018, so loading an image to an ImageData object needs an external library. 
 97 | 
 98 | ---
 99 | 
100 | ## Options
101 | You can use an option preset name (string) or an [options object](https://github.com/jankovicsandras/imagetracerjs/blob/master/options.md) to control the tracing and rendering process.
102 | 
103 | ![Option presets gallery](docimages/option_presets_small.png)
104 | 
105 | These strings can be passed instead of the options object:
106 | ```'default'```
107 | ```'posterized1'```
108 | ```'posterized2'```
109 | ```'posterized3'```
110 | ```'curvy'```
111 | ```'sharp'```
112 | ```'detailed'```
113 | ```'smoothed'```
114 | ```'grayscale'```
115 | ```'fixedpalette'```
116 | ```'randomsampling1'```
117 | ```'randomsampling2'```
118 | ```'artistic1'```
119 | ```'artistic2'```
120 | ```'artistic3'```
121 | ```'artistic4'```
122 | 
123 | [Read more about options.](https://github.com/jankovicsandras/imagetracerjs/blob/master/options.md)
124 | 
125 | ---
126 | 
127 | ## Examples
128 | 
129 | ### Using in the Browser
130 | Include the script:
131 | ```javascript
132 | <script src="imagetracer_v1.2.6.js"></script>
133 | ```
134 | Then
135 | ```javascript
136 | // Loading smiley.png, tracing and calling alert callback on the SVG string result 
137 | ImageTracer.imageToSVG( 'smiley.png', alert );
138 | 
139 | 
140 | // Almost the same with options, and the ImageTracer.appendSVGString callback will append the SVG
141 | ImageTracer.imageToSVG( 'smiley.png', ImageTracer.appendSVGString, { ltres:0.1, qtres:1, scale:10, strokewidth:5 } );
142 | 
143 | 
144 | // This uses the 'posterized2' option preset and appends the SVG to an element with id="svgcontainer"
145 | ImageTracer.imageToSVG(
146 | 	'panda.png',
147 | 	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); },
148 | 	'posterized2'
149 | );
150 | 
151 | 
152 | // The helper function loadImage() loads an image to a canvas, then executing callback:
153 | // appending the canvas to a div here.
154 | ImageTracer.loadImage(
155 | 	'panda.png',
156 | 	function(canvas){ (document.getElementById('canvascontainer')).appendChild(canvas); }
157 | );
158 | 
159 | 
160 | // ImageData can be traced to an SVG string synchronously.
161 | ImageTracer.loadImage(
162 | 	'smiley.png',
163 | 	function(canvas){
164 | 	
165 | 		// Getting ImageData from canvas with the helper function getImgdata().
166 | 	 	var imgd = ImageTracer.getImgdata( canvas );
167 | 	 	
168 | 	 	// Synchronous tracing to SVG string
169 | 	 	var svgstr = ImageTracer.imagedataToSVG( imgd, { scale:5 } );
170 | 	 
171 | 	 	// Appending SVG
172 | 	 	ImageTracer.appendSVGString( svgstr, 'svgcontainer' );
173 | 	 	
174 | 	}
175 | );
176 | 
177 | 
178 | // This will load an image, trace it when loaded, and execute callback on the tracedata:
179 | // stringifying and alerting it here.
180 | ImageTracer.imageToTracedata(
181 | 	'smiley.png',
182 | 	function(tracedata){ alert( JSON.stringify( tracedata ) ); },
183 | 	{ ltres:0.1, qtres:1, scale:10 }
184 | );
185 | 
186 | 
187 | // imagedataToTracedata() is very similar to the previous functions. This returns tracedata synchronously.
188 | ImageTracer.loadImage(
189 | 		'smiley.png',
190 | 		function(canvas){ 
191 | 		
192 | 			// Getting ImageData from canvas with the helper function getImgdata().
193 | 			var imgd = ImageTracer.getImgdata(canvas);
194 | 			
195 | 			// Synchronous tracing to tracedata
196 | 			var tracedata = ImageTracer.imagedataToTracedata( imgd, { ltres:1, qtres:0.01, scale:10 } );
197 | 			
198 | 			alert( JSON.stringify( tracedata ) );
199 | 		}
200 | );
201 | ```
202 | 
203 | ### Using with Node.js CLI
204 | 
205 | Node.js Command line interface example:
206 | 
207 | ```
208 | imagetracerjs/nodecli>node nodecli ../panda.png outfilename panda.svg scale 10
209 | ```
210 | 
211 | Expected result:
212 | 
213 | ```
214 | imagetracerjs/nodecli/panda.svg was saved!
215 | ```
216 | 
217 | CLI parameter names are supported both with and without trailing dash: ```-scale 10``` and ```scale 10``` are both correct.
218 | Almost all options are supported, except ```pal``` and ```layercontainerid```.
219 | 
220 | ### Simple Node.js converting example
221 | 
222 | ```javascript
223 | "use strict";
224 | 
225 | var fs = require('fs');
226 | 
227 | var ImageTracer = require( __dirname + '/../imagetracer_v1.2.6' );
228 | 
229 | // This example uses https://github.com/arian/pngjs 
230 | // , but other libraries can be used to load an image file to an ImageData object.
231 | var PNGReader = require( __dirname + '/PNGReader' );
232 | 
233 | // Input and output filepaths / URLs
234 | var infilepath = __dirname + '/' + 'panda.png';
235 | var outfilepath = __dirname + '/' + 'panda.svg';
236 | 
237 | 
238 | fs.readFile(
239 | 		
240 | 	infilepath,
241 | 	
242 | 	function( err, bytes ){ // fs.readFile callback
243 | 		if(err){ console.log(err); throw err; }
244 | 	
245 | 		var reader = new PNGReader(bytes);
246 | 	
247 | 		reader.parse( function( err, png ){ // PNGReader callback
248 | 			if(err){ console.log(err); throw err; }
249 | 			
250 | 			// creating an ImageData object
251 | 			var myImageData = { width:png.width, height:png.height, data:png.pixels };
252 | 			
253 | 			// tracing to SVG string
254 | 			var options = { scale: 5 }; // options object; option preset string can be used also
255 | 			
256 | 			var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
257 | 			
258 | 			// writing to file
259 | 			fs.writeFile(
260 | 				outfilepath,
261 | 				svgstring,
262 | 				function(err){ if(err){ console.log(err); throw err; } console.log( outfilepath + ' was saved!' ); }
263 | 			);
264 | 			
265 | 		});// End of reader.parse()
266 | 		
267 | 	}// End of readFile callback()
268 | 	
269 | );// End of fs.readFile()
270 | ```
271 | 
272 | ### Tracedata processing / Simplify.js example
273 | It's possible to process the traced geometry and color data before SVG rendering. This example [simplify_interop.html](https://github.com/jankovicsandras/imagetracerjs/blob/master/simplify_interop.html) shows polyline simplification. You need to download simplify.js from https://github.com/mourner/simplify-js .
274 | 
275 | ---
276 | 
277 | ## InkScape extension
278 | ImageTracer is available as an InkScape extension: [https://inkscape.org/~MarioVoigt/%E2%98%85imagetracerjs-for-inkscape-1x](https://inkscape.org/~MarioVoigt/%E2%98%85imagetracerjs-for-inkscape-1x)
279 | 
280 | [Screenshots](https://github.com/jankovicsandras/imagetracerjs/issues/47)
281 | 
282 | Thanks Mario Voigt!
283 | 
284 | ---
285 | 
286 | ## Process overview
287 | See [Process overview and Ideas for improvement](https://github.com/jankovicsandras/imagetracerjs/blob/master/process_overview.md)
288 | 
289 | ---
290 | 
291 | ## License
292 | ### The Unlicense / PUBLIC DOMAIN
293 | 
294 | This is free and unencumbered software released into the public domain.
295 | 
296 | Anyone is free to copy, modify, publish, use, compile, sell, or
297 | distribute this software, either in source code form or as a compiled
298 | binary, for any purpose, commercial or non-commercial, and by any
299 | means.
300 | 
301 | In jurisdictions that recognize copyright laws, the author or authors
302 | of this software dedicate any and all copyright interest in the
303 | software to the public domain. We make this dedication for the benefit
304 | of the public at large and to the detriment of our heirs and
305 | successors. We intend this dedication to be an overt act of
306 | relinquishment in perpetuity of all present and future rights to this
307 | software under copyright law.
308 | 
309 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
310 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
311 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
312 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
313 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
314 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
315 | OTHER DEALINGS IN THE SOFTWARE.
316 | 
317 | For more information, please refer to [http://unlicense.org](http://unlicense.org)
318 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "imagetracerjs",
 3 |   "description": "raster image tracer and vectorizer, bitmap to SVG converter",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/jankovicsandras/imagetracerjs.git"
 7 |   },
 8 |   "main": "imagetracer_v1.2.6.js",
 9 |   "keywords": [
10 |   	"image",
11 |     "tracer",
12 |     "tracing",
13 |     "vector",
14 |     "raster",
15 |     "vectorize",
16 |     "vectorizing",
17 |     "convert",
18 |     "conversion",
19 |     "converting",
20 |     "bitmap",
21 |     "svg",
22 |     "bmp",
23 |     "png",
24 |     "jpg",
25 |     "jpeg",
26 |     "gif"
27 |   ],
28 |   "authors": [ "András Jankovics" ],
29 |   "license": "Unlicense",
30 |   "bugs": {
31 |     "url": "https://github.com/jankovicsandras/imagetracerjs/issues"
32 |    },
33 |   "homepage": "https://github.com/jankovicsandras/imagetracerjs#readme"
34 | }
35 | 


--------------------------------------------------------------------------------
/docimages/cover_problem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/cover_problem.png


--------------------------------------------------------------------------------
/docimages/option_presets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/option_presets.png


--------------------------------------------------------------------------------
/docimages/option_presets_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/option_presets_small.png


--------------------------------------------------------------------------------
/docimages/s1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s1.png


--------------------------------------------------------------------------------
/docimages/s10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s10.png


--------------------------------------------------------------------------------
/docimages/s11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s11.png


--------------------------------------------------------------------------------
/docimages/s12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s12.png


--------------------------------------------------------------------------------
/docimages/s13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s13.png


--------------------------------------------------------------------------------
/docimages/s14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s14.png


--------------------------------------------------------------------------------
/docimages/s15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s15.png


--------------------------------------------------------------------------------
/docimages/s2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s2.png


--------------------------------------------------------------------------------
/docimages/s3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s3.png


--------------------------------------------------------------------------------
/docimages/s4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s4.png


--------------------------------------------------------------------------------
/docimages/s7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s7.png


--------------------------------------------------------------------------------
/docimages/s8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s8.png


--------------------------------------------------------------------------------
/docimages/s9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/s9.png


--------------------------------------------------------------------------------
/docimages/transparency_problem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/docimages/transparency_problem.png


--------------------------------------------------------------------------------
/imagetracer_examples.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html><head>
 3 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4 | 	<meta charset="utf-8">
 5 | 	<script src="imagetracer_v1.2.6.js"></script>
 6 | 	<script>
 7 | 
 8 | 		function onload_init(){
 9 | 			
10 | 			// Loading smiley.png, tracing and calling alert callback on the SVG string result
11 | 			ImageTracer.imageToSVG( 'smiley.png', alert );
12 | 
13 | 
14 | 			// Almost the same with options, and the ImageTracer.appendSVGString callback will append the SVG
15 | 			ImageTracer.imageToSVG( 'smiley.png', ImageTracer.appendSVGString, { ltres:0.1, qtres:1, scale:10, strokewidth:5 } );
16 | 
17 | 
18 | 			// This uses the 'Posterized2' option preset and appends the SVG to an element with id="svgcontainer"
19 | 			ImageTracer.imageToSVG(
20 | 				'panda.png',
21 | 				function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); },
22 | 				'Posterized2'
23 | 			);
24 | 
25 | 
26 | 			// The helper function loadImage() loads an image to a canvas, then executing callback: appending the canvas to a div here.
27 | 			ImageTracer.loadImage(
28 | 				'panda.png',
29 | 				function(canvas){ (document.getElementById('canvascontainer')).appendChild(canvas); }
30 | 			);
31 | 
32 | 
33 | 			// ImageData can be traced to an SVG string synchronously.
34 | 			ImageTracer.loadImage(
35 | 				'smiley.png',
36 | 				function(canvas){
37 | 				
38 | 					// Getting ImageData from canvas with the helper function getImgdata().
39 | 				 	var imgd = ImageTracer.getImgdata( canvas );
40 | 				 	
41 | 				 	// Synchronous tracing to SVG string
42 | 				 	var svgstr = ImageTracer.imagedataToSVG( imgd, { scale:5 } );
43 | 				 
44 | 				 	// Appending SVG
45 | 				 	ImageTracer.appendSVGString( svgstr, 'svgcontainer' );
46 | 				 	
47 | 				}
48 | 			);
49 | 
50 | 
51 | 			// This will load an image, trace it when loaded, and execute callback on the tracedata: stringifying and alerting it here.
52 | 			ImageTracer.imageToTracedata(
53 | 				'smiley.png',
54 | 				function(tracedata){ alert( JSON.stringify( tracedata ) ); },
55 | 				{ ltres:0.1, qtres:1, scale:10 }
56 | 			);
57 | 
58 | 
59 | 			// imagedataToTracedata() is very similar to the previous functions. This returns tracedata synchronously.
60 | 			ImageTracer.loadImage(
61 | 					'smiley.png',
62 | 					function(canvas){ 
63 | 					
64 | 						// Getting ImageData from canvas with the helper function getImgdata().
65 | 						var imgd = ImageTracer.getImgdata(canvas);
66 | 						
67 | 						// Synchronous tracing to tracedata
68 | 						var tracedata = ImageTracer.imagedataToTracedata( imgd, { scale:10 } );
69 | 						
70 | 						alert( JSON.stringify( tracedata ) );
71 | 					}
72 | 			);
73 | 
74 | 		}// End of onload_init()
75 | 		
76 | 	</script>
77 | 	</head>
78 | 	<body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
79 | 		<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
80 | 		<div id="svgcontainer"></div>
81 | 		<div id="canvascontainer"></div>
82 | 	</body></html>


--------------------------------------------------------------------------------
/imagetracer_options_gallery.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6 | 	<meta charset="utf-8">
 7 | 	<title>imagetracer.js options gallery</title>
 8 | 	<style>
 9 | 	
10 | 		body {
11 | 			zoom: 3; 
12 | 			-moz-transform: scale(3); 
13 | 			-moz-transform-origin: 0 0;
14 | 		} 
15 | 	
16 | 		img, svg, canvas {
17 | 			background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQImWPQ1tb+r62t/d/f3/+/v7//fwYMARgDJoEhAACRARthAfQS8AAAAABJRU5ErkJggg==) repeat;
18 | 			border: solid 1px cyan;
19 | 			image-rendering: optimizeSpeed;             /* Older versions of FF          */
20 | 			image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
21 | 			image-rendering: -webkit-optimize-contrast; /* Safari                        */
22 | 			image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
23 | 			image-rendering: pixelated;                 /* Awesome future-browsers       */
24 | 			-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
25 | 		}
26 | 		
27 | 		table{ border: solid 1px gray; border-collapse:collapse; }
28 | 		td{ border: solid 1px gray; vertical-align:top; }
29 | 		th{ border: solid 1px gray; }
30 | 		
31 | 	</style>
32 | 	<script src="imagetracer_v1.2.6.js"></script>
33 | 	<script>
34 | 		
35 | 		var cnt = 0;
36 | 	
37 | 		function onload_init(){
38 | 			tracenext();
39 | 		}
40 | 		
41 | 		function tracenext(){
42 | 			if(cnt<16){
43 | 				ImageTracer.imageToSVG('testimages/combined.png', 
44 | 					function(svgstr){
45 | 						document.getElementById('td'+(cnt+1)).innerHTML = svgstr +'<br/>'+Object.keys(ImageTracer.optionpresets)[cnt]+'  '+svgstr.length+' bytes';
46 | 						cnt++;
47 | 						tracenext();
48 | 					},
49 | 					Object.keys(ImageTracer.optionpresets)[cnt]
50 | 				);
51 | 			}
52 | 		}
53 | 		
54 | 	</script>
55 | </head>
56 | 
57 | <body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
58 | 	<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
59 | 	<div id="content">
60 | 	<table><tbody>
61 | 	<tr id="tr0" ><td id="td0"><img src="testimages/combined.png" /><br>Original</td><td id="td1"></td><td id="td2"></td><td id="td3"></td><td id="td16"></td></tr>
62 | 	<tr id="tr1" ><td id="td4"></td><td id="td5"></td><td id="td6"></td><td id="td7"></td><td id="td17"></td></tr>
63 | 	<tr id="tr2" ><td id="td8"></td><td id="td9"></td><td id="td10"></td><td id="td11"></td><td id="td18"></td></tr>
64 | 	<tr id="tr3" ><td id="td12"></td><td id="td13"></td><td id="td14"></td><td id="td15"></td><td id="td19"></td></tr>
65 | 	</tbody></table>
66 | 	</div>
67 | </body>
68 | 
69 | </html>


--------------------------------------------------------------------------------
/imagetracer_test_automation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html><head>
  3 | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4 | 	<meta charset="utf-8">
  5 | 	<title>imagetracer.js test automation</title>
  6 | 	<style> 
  7 | 		.imgcontainer{
  8 | 			background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQImWPQ1tb+r62t/d/f3/+/v7//fwYMARgDJoEhAACRARthAfQS8AAAAABJRU5ErkJggg==) repeat;
  9 | 			border: solid 1px cyan;
 10 | 		}
 11 | 		table{ border: solid 1px gray; border-collapse:collapse; }
 12 | 		td{ border: solid 1px gray; vertical-align:top; }
 13 | 		th{ border: solid 1px gray; }
 14 | 	</style>
 15 | 	<script src="imagetracer_v1.2.6.js"></script>
 16 | 	<script>
 17 | 		var queue;
 18 | 		var stats = [], tt, rt;
 19 | 		var timeoutid = 0, timeoutwait = 500, drawmode = false, rowid = 1, repeatnum = 1, totaltime;
 20 | 		
 21 | 		function log(msg){ console.log(msg); }
 22 | 		
 23 | 		function startprocess(){
 24 | 			
 25 | 			if(!timeoutid){
 26 | 				
 27 | 				log('starting');
 28 | 				
 29 | 				var filenames = [];
 30 | 				
 31 | 				// Drawmode
 32 | 				if(document.getElementById('cbox0').checked){ drawmode = true; }else{ drawmode = false; }
 33 | 				
 34 | 				// Selected images
 35 | 				for(var i=1; i<17; i++){ if(document.getElementById('icb'+i).checked){ filenames.push("testimages/"+i+".png"); } }
 36 | 				
 37 | 				// Repeats
 38 | 				repeatnum = 1;
 39 | 				try{ repeatnum = parseInt(email = document.getElementById('repeatinput').value); }catch(e){log(e);}
 40 | 				
 41 | 				// Options
 42 | 				var optionses = [], ks = Object.keys(ImageTracer.optionpresets);
 43 | 				for(var i=0; i<ks.length; i++){
 44 | 					if(document.getElementById('ocb'+i).checked){ optionses.push(ImageTracer.optionpresets[ks[i]]); }
 45 | 				}
 46 | 				/*if(document.getElementById('ocb1').checked){ optionses.push({}); }
 47 | 				if(document.getElementById('ocb2').checked){ optionses.push({ blurradius:2, ltres:0.1, numberofcolors:64 }); }
 48 | 				if(document.getElementById('ocb3').checked){ optionses.push({ strokewidth:4, blurradius:5, roundcoords:0, desc:false, scale:4, }); }
 49 | 				*/
 50 | 				if(document.getElementById('ocbx').checked){
 51 | 					try{
 52 | 						optionses.push( JSON.parse( document.getElementById('custom1input').value ) );
 53 | 					}catch(e){ log(e); }
 54 | 				}
 55 | 				if(document.getElementById('ocby').checked){
 56 | 					try{
 57 | 						optionses.push( JSON.parse( document.getElementById('custom2input').value ) );
 58 | 					}catch(e){ log(e); }
 59 | 				}
 60 | 				
 61 | 				// Queue
 62 | 				queue = [];
 63 | 				for(var k=0; k<repeatnum; k++){
 64 | 					for(var i=0; i<filenames.length; i++){
 65 | 						for(var j=0; j<optionses.length; j++){
 66 | 							queue.push([filenames[i],optionses[j]]);
 67 | 						}
 68 | 					}
 69 | 				}
 70 | 				
 71 | 				// Processing
 72 | 				totaltime = Date.now();
 73 | 				processqueue();
 74 | 			}
 75 | 		}// End of startprocess()
 76 | 		
 77 | 		function processqueue(){
 78 | 			
 79 | 			var item = queue.shift();
 80 | 			if(item){
 81 | 			
 82 | 				log('file '+item[0]);
 83 | 				
 84 | 				ImageTracer.loadImage(item[0],
 85 | 						function(canvas){
 86 | 							
 87 | 							// Start tracing timer
 88 | 							tt = Date.now();
 89 | 							var tracedata = ImageTracer.imagedataToTracedata( ImageTracer.getImgdata(canvas), item[1] );
 90 | 							// Stop tracing timer
 91 | 							tt = Date.now() - tt;
 92 | 							
 93 | 							// Start rendering timer
 94 | 							rt = Date.now();
 95 | 							// Render
 96 | 							var svgstr = ImageTracer.getsvgstring(tracedata, item[1]);
 97 | 							// Stop rendering timer
 98 | 							rt = Date.now() - rt;
 99 | 							
100 | 							// Counting paths
101 | 							var pcont = 0;
102 | 							for(k in tracedata.layers) {
103 | 								if(!tracedata.layers.hasOwnProperty(k)){ continue; }
104 | 								pcont += tracedata.layers[k].length;
105 | 							}
106 | 							
107 | 							////////////////
108 | 							
109 | 							// Draw SVG
110 | 							if(drawmode){
111 | 								document.getElementById('svgcontainer').innerHTML = '';
112 | 								ImageTracer.appendSVGString(svgstr,'svgcontainer');
113 | 							
114 | 								// Draw diff
115 | 								// draw original
116 | 								var oc = document.getElementById('originalcanvas'); oc.innerHTML = '';
117 | 								oc.width = canvas.width;
118 | 								oc.height = canvas.height;
119 | 								var ctx = oc.getContext('2d');
120 | 								var oimgd = ImageTracer.getImgdata(canvas);
121 | 								ctx.putImageData(oimgd,0,0);
122 | 								
123 | 								// draw new
124 | 								backtopng(svgstr,
125 | 									function(imgd){
126 | 										
127 | 										// draw diff
128 | 										var dc = document.getElementById('diffcanvas'); dc.innerHTML = '';
129 | 										dc.width = imgd.width;
130 | 										dc.height = imgd.height;
131 | 										var dctx = dc.getContext('2d');
132 | 										var idx = 0, d = 0;
133 | 										var rgbadiff=0, pixeldiff=0, thisdiff=0;
134 | 										// Calculating RGBA diff
135 | 										var dimgd = dctx.createImageData(imgd.width,imgd.height);
136 | 										for(var j=0; j<imgd.height; j++){
137 | 											for(var i=0; i<imgd.width; i++){
138 | 												idx = (j*imgd.width + i) * 4;
139 | 												dimgd.data[idx  ] = Math.abs( oimgd.data[idx  ] - imgd.data[idx  ] );
140 | 												dimgd.data[idx+1] = Math.abs( oimgd.data[idx+1] - imgd.data[idx+1] );
141 | 												dimgd.data[idx+2] = Math.abs( oimgd.data[idx+2] - imgd.data[idx+2] );
142 | 												dimgd.data[idx+3] = Math.abs( oimgd.data[idx+3] - imgd.data[idx+3] );
143 | 												thisdiff = dimgd.data[idx  ] + dimgd.data[idx+1] + dimgd.data[idx+2] + dimgd.data[idx+3];
144 | 												if(thisdiff === 0 ){ dimgd.data[idx+3] = 0; }else{ dimgd.data[idx+3] = 255; pixeldiff++; }
145 | 												rgbadiff += thisdiff;
146 | 											}
147 | 										}
148 | 										dctx.putImageData( dimgd, 0, 0 );
149 | 										
150 | 										// Registerstats
151 | 										registerstats(
152 | 												item[0],
153 | 												tracedata.width,
154 | 												tracedata.height,
155 | 												(tracedata.width*tracedata.height),
156 | 												svgstr.length,
157 | 												tt,
158 | 												rt,
159 | 												pcont,
160 | 												rgbadiff / ( tracedata.width * tracedata.height * 4 ),
161 | 												Math.floor(pixeldiff*100 / ( tracedata.width * tracedata.height )),
162 | 												JSON.stringify(item[1])
163 | 										);
164 | 										
165 | 										// Next item
166 | 										timeoutid = setTimeout( processqueue, timeoutwait );
167 | 									}
168 | 								);
169 | 							}else{// No drawmode
170 | 								
171 | 								// Registerstats
172 | 								registerstats(
173 | 										item[0],
174 | 										tracedata.width,
175 | 										tracedata.height,
176 | 										(tracedata.width*tracedata.height),
177 | 										svgstr.length,
178 | 										tt,
179 | 										rt,
180 | 										pcont,
181 | 										'n/a',
182 | 										'n/a',
183 | 										JSON.stringify(item[1])
184 | 								);
185 | 							
186 | 								// Next item
187 | 								timeoutid = setTimeout( processqueue, timeoutwait );
188 | 								
189 | 							}// End of drawmode check
190 | 							
191 | 						}// End of loadImage() callback 
192 | 				);// End of loadImage()
193 | 				
194 | 			}else{// No more images to process
195 | 				
196 | 				stopprocessing();
197 | 				//document.getElementById('logdiv').innerHTML += JSON.stringify(stats);
198 | 				
199 | 			}// End of item check
200 | 			
201 | 		}// End of processqueue()
202 | 		
203 | 		function stopprocessing(){ 
204 | 			clearTimeout(timeoutid); timeoutid = 0; 
205 | 			totaltime = Date.now() - totaltime; 
206 | 			alert('Time elapsed: '+totaltime+' ms.'); 
207 | 		}
208 | 		
209 | 		function registerstats(filename,w,h,area,svglength,tracetime,rendertime,pathcnt,rgbadiff,pixeldiff,options){
210 | 			var tableref = document.getElementById('logtable');
211 | 			var newrow = tableref.insertRow(-1);
212 | 			newrow.innerHTML = 
213 | 				'<td>'+rowid+'</td>'+
214 | 				'<td>'+filename+'</td>'+
215 | 				'<td>'+w+'</td>'+
216 | 				'<td>'+h+'</td>'+
217 | 				'<td>'+area+'</td>'+
218 | 				'<td>'+svglength+'</td>'+
219 | 				'<td>'+tracetime+'</td>'+
220 | 				'<td>'+rendertime+'</td>'+
221 | 				'<td>'+pathcnt+'</td>'+
222 | 				'<td>'+rgbadiff+'</td>'+
223 | 				'<td>'+pixeldiff+'</td>'+
224 | 				'<td>'+options+'</td>';
225 | 			rowid++;
226 | 		}
227 | 		
228 | 		function backtopng(svgstr,callback){
229 | 			var nc = document.getElementById('newcanvas'); nc.innerHTML = '';
230 | 			var img = document.createElement('img');
231 | 			img.onload = function(){
232 | 				nc.width=img.width;
233 | 				nc.height=img.height;
234 | 				var ctx = nc.getContext('2d');
235 | 				ctx.drawImage( img, 0, 0 );
236 | 				callback(ImageTracer.getImgdata(nc));
237 | 			};
238 | 			img.setAttribute('src','data:image/svg+xml;base64,'+btoa(svgstr));
239 | 		}
240 | 		
241 | 		function onload_init(){
242 | 			
243 | 			var k = Object.keys(ImageTracer.optionpresets), s='';
244 | 			for(var i=0; i<k.length; i++){
245 | 				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/>';
246 | 			}
247 | 			document.getElementById('ocbcontainer').innerHTML = s;
248 | 		}
249 | 		
250 | 	</script>
251 | 	</head>
252 | 	<body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
253 | 	<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
254 | 	<form id="testcontroller">
255 | 	<h1>Test images</h1>
256 | 	<table id="itable">
257 | 	<tbody>
258 | 		<tr>
259 | 			<td><label><input type="checkbox" id="icb1" value="1" checked="true">1.png</label><br><img src="testimages/1.png"></td> 
260 | 			<td><label><input type="checkbox" id="icb2" value="1" checked="true" >2.png</label><br><img src="testimages/2.png"></td>
261 | 			<td><label><input type="checkbox" id="icb3" value="1" checked="true" >3.png</label><br><img src="testimages/3.png"></td>
262 | 			<td><label><input type="checkbox" id="icb4" value="1" checked="true" >4.png</label><br><img src="testimages/4.png"></td>
263 | 		</tr>
264 | 		<tr>
265 | 			<td><label><input type="checkbox" id="icb5" value="1" checked="true" >5.png</label><br><img src="testimages/5.png"></td> 
266 | 			<td><label><input type="checkbox" id="icb6" value="1" checked="true" >6.png</label><br><img src="testimages/6.png"></td>
267 | 			<td><label><input type="checkbox" id="icb7" value="1" checked="true" >7.png</label><br><img src="testimages/7.png"></td>
268 | 			<td><label><input type="checkbox" id="icb8" value="1" checked="true" >8.png</label><br><img src="testimages/8.png"></td>
269 | 		</tr>
270 | 		<tr>
271 | 			<td><label><input type="checkbox" id="icb9" value="1" checked="true" >9.png</label><br><img src="testimages/9.png"></td> 
272 | 			<td><label><input type="checkbox" id="icb10" value="1" checked="true" >10.png</label><br><img src="testimages/10.png"></td>
273 | 			<td><label><input type="checkbox" id="icb11" value="1" checked="true" >11.png</label><br><img src="testimages/11.png"></td>
274 | 			<td><label><input type="checkbox" id="icb12" value="1" checked="true" >12.png</label><br><img src="testimages/12.png"></td>
275 | 		</tr>
276 | 		<tr>
277 | 			<td><label><input type="checkbox" id="icb13" value="1" checked="true" >13.png</label><br><img src="testimages/13.png"></td> 
278 | 			<td><label><input type="checkbox" id="icb14" value="1" checked="true" >14.png</label><br><img src="testimages/14.png"></td>
279 | 			<td><label><input type="checkbox" id="icb15" value="1" checked="true" >15.png</label><br><img src="testimages/15.png"></td>
280 | 			<td><label><input type="checkbox" id="icb16" value="1" checked="true" >16.png</label><br><img src="testimages/16.png"></td>
281 | 		</tr>
282 | 	</tbody>
283 | 	</table>
284 | 	<h1>Settings</h1>
285 | 	<label><input type="checkbox" id="cbox0" value="1" checked="true">Draw SVG</label><br>
286 | 	<div id="ocbcontainer"></div>
287 | 	<label><input type="checkbox" id="ocbx" value="1" >Custom Options 1:</label><input type="text" id="custom1input" value="" style="width:40em" ><br>
288 | 	<label><input type="checkbox" id="ocby" value="1" >Custom Options 2:</label><input type="text" id="custom2input" value="" style="width:40em" ><br>
289 | 	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>	
290 | 	<label><input type="text" id="repeatinput" value="1">Repeats</label><br>
291 | 	<button id="startbutton" type="button" onclick="startprocess()" >START</button>
292 | 	<button id="stopbutton" type="button" onclick="stopprocessing()" >STOP</button>
293 | 	</form>
294 | 	
295 | 	<h1>Result (if Draw SVG is active)</h1>
296 | 	<table id="itable">
297 | 	<thead>
298 | 		<tr><th>Traced SVG</th><th>Original raster</th><th>SVG rendered as raster</th><th>Difference</th></tr>
299 | 	</thead>
300 | 	<tbody>
301 | 		<tr>
302 | 			<td><div id="svgcontainer" class="imgcontainer"></div></td> 
303 | 			<td><canvas id="originalcanvas" class="imgcontainer"></canvas></td>
304 | 			<td><canvas id="newcanvas" class="imgcontainer"></canvas></td>
305 | 			<td><canvas id="diffcanvas" class="imgcontainer"></canvas></td>
306 | 		</tr>
307 | 	</tbody>
308 | 	</table>
309 | 	
310 | 	<h1>Measurements</h1>
311 | 	<div id="logdiv">
312 | 	<table id="logtable">
313 | 	<thead>
314 | 		<tr>
315 | 			<th>RowID</th>
316 | 			<th>Filename</th>
317 | 			<th>width (pixels)</th>
318 | 			<th>height (pixels)</th>
319 | 			<th>area (pixels)</th>
320 | 			<th>SVG string length (bytes)</th>
321 | 			<th>Tracing time (ms)</th>
322 | 			<th>Rendering time (ms)</th>
323 | 			<th>Nr. of paths</th>
324 | 			<th>RGBA difference (cummulative RGBA difference / (area*4))</th>
325 | 			<th>Different pixels (%)</th>
326 | 			<th>Options</th>
327 | 		</tr>
328 | 	</thead>
329 | 	<tbody id="logtbody">
330 | 	</tbody>
331 | 	</table>
332 | 	
333 | 	</div>
334 | </body></html>


--------------------------------------------------------------------------------
/imagetracer_v1.2.6.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | 	imagetracer.js version 1.2.6
   3 | 	Simple raster image tracer and vectorizer written in JavaScript.
   4 | 	andras@jankovics.net
   5 | */
   6 | 
   7 | /*
   8 | 
   9 | The Unlicense / PUBLIC DOMAIN
  10 | 
  11 | This is free and unencumbered software released into the public domain.
  12 | 
  13 | Anyone is free to copy, modify, publish, use, compile, sell, or
  14 | distribute this software, either in source code form or as a compiled
  15 | binary, for any purpose, commercial or non-commercial, and by any
  16 | means.
  17 | 
  18 | In jurisdictions that recognize copyright laws, the author or authors
  19 | of this software dedicate any and all copyright interest in the
  20 | software to the public domain. We make this dedication for the benefit
  21 | of the public at large and to the detriment of our heirs and
  22 | successors. We intend this dedication to be an overt act of
  23 | relinquishment in perpetuity of all present and future rights to this
  24 | software under copyright law.
  25 | 
  26 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  27 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  28 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  29 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
  30 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
  31 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  32 | OTHER DEALINGS IN THE SOFTWARE.
  33 | 
  34 | For more information, please refer to http://unlicense.org/
  35 | 
  36 | */
  37 | 
  38 | (function(){ 'use strict';
  39 | 
  40 | function ImageTracer(){
  41 | 	var _this = this;
  42 | 
  43 | 	this.versionnumber = '1.2.6',
  44 | 	
  45 | 	////////////////////////////////////////////////////////////
  46 | 	//
  47 | 	//  API
  48 | 	//
  49 | 	////////////////////////////////////////////////////////////
  50 | 	
  51 | 	// Loading an image from a URL, tracing when loaded,
  52 | 	// then executing callback with the scaled svg string as argument
  53 | 	this.imageToSVG = function( url, callback, options ){
  54 | 		options = _this.checkoptions(options);
  55 | 		// loading image, tracing and callback
  56 | 		_this.loadImage(
  57 | 			url,
  58 | 			function(canvas){
  59 | 				callback(
  60 | 					_this.imagedataToSVG( _this.getImgdata(canvas), options )
  61 | 				);
  62 | 			},
  63 | 			options
  64 | 		);
  65 | 	},// End of imageToSVG()
  66 | 	
  67 | 	// Tracing imagedata, then returning the scaled svg string
  68 | 	this.imagedataToSVG = function( imgd, options ){
  69 | 		options = _this.checkoptions(options);
  70 | 		// tracing imagedata
  71 | 		var td = _this.imagedataToTracedata( imgd, options );
  72 | 		// returning SVG string
  73 | 		return _this.getsvgstring(td, options);
  74 | 	},// End of imagedataToSVG()
  75 | 	
  76 | 	// Loading an image from a URL, tracing when loaded,
  77 | 	// then executing callback with tracedata as argument
  78 | 	this.imageToTracedata = function( url, callback, options ){
  79 | 		options = _this.checkoptions(options);
  80 | 		// loading image, tracing and callback
  81 | 		_this.loadImage(
  82 | 				url,
  83 | 				function(canvas){
  84 | 					callback(
  85 | 						_this.imagedataToTracedata( _this.getImgdata(canvas), options )
  86 | 					);
  87 | 				},
  88 | 				options
  89 | 		);
  90 | 	},// End of imageToTracedata()
  91 | 	
  92 | 	// Tracing imagedata, then returning tracedata (layers with paths, palette, image size)
  93 | 	this.imagedataToTracedata = function( imgd, options ){
  94 | 		options = _this.checkoptions(options);
  95 | 		
  96 | 		// 1. Color quantization
  97 | 		var ii = _this.colorquantization( imgd, options );
  98 | 		
  99 | 		if(options.layering === 0){// Sequential layering
 100 | 			
 101 | 			// create tracedata object
 102 | 			var tracedata = {
 103 | 				layers : [],
 104 | 				palette : ii.palette,
 105 | 				width : ii.array[0].length-2,
 106 | 				height : ii.array.length-2
 107 | 			};
 108 | 			
 109 | 			// Loop to trace each color layer
 110 | 			for(var colornum=0; colornum<ii.palette.length; colornum++){
 111 | 				
 112 | 				// layeringstep -> pathscan -> internodes -> batchtracepaths
 113 | 				var tracedlayer =
 114 | 					_this.batchtracepaths(
 115 | 							
 116 | 						_this.internodes(
 117 | 								
 118 | 							_this.pathscan(
 119 | 								_this.layeringstep( ii, colornum ),
 120 | 								options.pathomit
 121 | 							),
 122 | 							
 123 | 							options
 124 | 							
 125 | 						),
 126 | 						
 127 | 						options.ltres,
 128 | 						options.qtres
 129 | 						
 130 | 					);
 131 | 				
 132 | 				// adding traced layer
 133 | 				tracedata.layers.push(tracedlayer);
 134 | 				
 135 | 			}// End of color loop
 136 | 			
 137 | 		}else{// Parallel layering
 138 | 			// 2. Layer separation and edge detection
 139 | 			var ls = _this.layering( ii );
 140 | 			
 141 | 			// Optional edge node visualization
 142 | 			if(options.layercontainerid){ _this.drawLayers( ls, _this.specpalette, options.scale, options.layercontainerid ); }
 143 | 			
 144 | 			// 3. Batch pathscan
 145 | 			var bps = _this.batchpathscan( ls, options.pathomit );
 146 | 			
 147 | 			// 4. Batch interpollation
 148 | 			var bis = _this.batchinternodes( bps, options );
 149 | 			
 150 | 			// 5. Batch tracing and creating tracedata object
 151 | 			var tracedata = {
 152 | 				layers : _this.batchtracelayers( bis, options.ltres, options.qtres ),
 153 | 				palette : ii.palette,
 154 | 				width : imgd.width,
 155 | 				height : imgd.height
 156 | 			};
 157 | 			
 158 | 		}// End of parallel layering
 159 | 		
 160 | 		// return tracedata
 161 | 		return tracedata;
 162 | 		
 163 | 	},// End of imagedataToTracedata()
 164 | 	
 165 | 	this.optionpresets = {
 166 | 		'default': {
 167 | 			
 168 | 			// Tracing
 169 | 			corsenabled : false,
 170 | 			ltres : 1,
 171 | 			qtres : 1,
 172 | 			pathomit : 8,
 173 | 			rightangleenhance : true,
 174 | 			
 175 | 			// Color quantization
 176 | 			colorsampling : 2,
 177 | 			numberofcolors : 16,
 178 | 			mincolorratio : 0,
 179 | 			colorquantcycles : 3,
 180 | 			
 181 | 			// Layering method
 182 | 			layering : 0,
 183 | 			
 184 | 			// SVG rendering
 185 | 			strokewidth : 1,
 186 | 			linefilter : false,
 187 | 			scale : 1,
 188 | 			roundcoords : 1,
 189 | 			viewbox : false,
 190 | 			desc : false,
 191 | 			lcpr : 0,
 192 | 			qcpr : 0,
 193 | 			
 194 | 			// Blur
 195 | 			blurradius : 0,
 196 | 			blurdelta : 20
 197 | 			
 198 | 		},
 199 | 		'posterized1': { colorsampling:0, numberofcolors:2 },
 200 | 		'posterized2': { numberofcolors:4, blurradius:5 },
 201 | 		'curvy': { ltres:0.01, linefilter:true, rightangleenhance:false },
 202 | 		'sharp': { qtres:0.01, linefilter:false },
 203 | 		'detailed': { pathomit:0, roundcoords:2, ltres:0.5, qtres:0.5, numberofcolors:64 },
 204 | 		'smoothed': { blurradius:5, blurdelta: 64 },
 205 | 		'grayscale': { colorsampling:0, colorquantcycles:1, numberofcolors:7 },
 206 | 		'fixedpalette': { colorsampling:0, colorquantcycles:1, numberofcolors:27 },
 207 | 		'randomsampling1': { colorsampling:1, numberofcolors:8 },
 208 | 		'randomsampling2': { colorsampling:1, numberofcolors:64 },
 209 | 		'artistic1': { colorsampling:0, colorquantcycles:1, pathomit:0, blurradius:5, blurdelta: 64, ltres:0.01, linefilter:true, numberofcolors:16, strokewidth:2 },
 210 | 		'artistic2': { qtres:0.01, colorsampling:0, colorquantcycles:1, numberofcolors:4, strokewidth:0 },
 211 | 		'artistic3': { qtres:10, ltres:10, numberofcolors:8 },
 212 | 		'artistic4': { qtres:10, ltres:10, numberofcolors:64, blurradius:5, blurdelta: 256, strokewidth:2 },
 213 | 		'posterized3': { ltres: 1, qtres: 1, pathomit: 20, rightangleenhance: true, colorsampling: 0, numberofcolors: 3,
 214 | 			mincolorratio: 0, colorquantcycles: 3, blurradius: 3, blurdelta: 20, strokewidth: 0, linefilter: false,
 215 | 			roundcoords: 1, pal: [ { r: 0, g: 0, b: 100, a: 255 }, { r: 255, g: 255, b: 255, a: 255 } ] }
 216 | 	},// End of optionpresets
 217 | 	
 218 | 	// creating options object, setting defaults for missing values
 219 | 	this.checkoptions = function(options){
 220 | 		options = options || {};
 221 | 		// Option preset
 222 | 		if(typeof options === 'string'){
 223 | 			options = options.toLowerCase();
 224 | 			if( _this.optionpresets[options] ){ options = _this.optionpresets[options]; }else{ options = {}; }
 225 | 		}
 226 | 		// Defaults
 227 | 		var ok = Object.keys(_this.optionpresets['default']);
 228 | 		for(var k=0; k<ok.length; k++){
 229 | 			if(!options.hasOwnProperty(ok[k])){ options[ok[k]] = _this.optionpresets['default'][ok[k]]; }
 230 | 		}
 231 | 		// options.pal is not defined here, the custom palette should be added externally: options.pal = [ { 'r':0, 'g':0, 'b':0, 'a':255 }, {...}, ... ];
 232 | 		// options.layercontainerid is not defined here, can be added externally: options.layercontainerid = 'mydiv'; ... <div id="mydiv"></div>
 233 | 		return options;
 234 | 	},// End of checkoptions()
 235 | 	
 236 | 	////////////////////////////////////////////////////////////
 237 | 	//
 238 | 	//  Vectorizing functions
 239 | 	//
 240 | 	////////////////////////////////////////////////////////////
 241 | 	
 242 | 	// 1. Color quantization
 243 | 	// Using a form of k-means clustering repeatead options.colorquantcycles times. http://en.wikipedia.org/wiki/Color_quantization
 244 | 	this.colorquantization = function( imgd, options ){
 245 | 		var arr = [], idx=0, cd,cdl,ci, paletteacc = [], pixelnum = imgd.width * imgd.height, i, j, k, cnt, palette;
 246 | 		
 247 | 		// imgd.data must be RGBA, not just RGB
 248 | 		if( imgd.data.length < pixelnum * 4 ){
 249 | 			var newimgddata = new Uint8ClampedArray(pixelnum * 4);
 250 | 			for(var pxcnt = 0; pxcnt < pixelnum ; pxcnt++){
 251 | 				newimgddata[pxcnt*4  ] = imgd.data[pxcnt*3  ];
 252 | 				newimgddata[pxcnt*4+1] = imgd.data[pxcnt*3+1];
 253 | 				newimgddata[pxcnt*4+2] = imgd.data[pxcnt*3+2];
 254 | 				newimgddata[pxcnt*4+3] = 255;
 255 | 			}
 256 | 			imgd.data = newimgddata;
 257 | 		}// End of RGBA imgd.data check
 258 | 		
 259 | 		// Filling arr (color index array) with -1
 260 | 		for( j=0; j<imgd.height+2; j++ ){ arr[j]=[]; for(i=0; i<imgd.width+2 ; i++){ arr[j][i] = -1; } }
 261 | 		
 262 | 		// Use custom palette if pal is defined or sample / generate custom length palette
 263 | 		if(options.pal){
 264 | 			palette = options.pal;
 265 | 		}else if(options.colorsampling === 0){
 266 | 			palette = _this.generatepalette(options.numberofcolors);
 267 | 		}else if(options.colorsampling === 1){
 268 | 			palette = _this.samplepalette( options.numberofcolors, imgd );
 269 | 		}else{
 270 | 			palette = _this.samplepalette2( options.numberofcolors, imgd );
 271 | 		}
 272 | 		
 273 | 		// Selective Gaussian blur preprocessing
 274 | 		if( options.blurradius > 0 ){ imgd = _this.blur( imgd, options.blurradius, options.blurdelta ); }
 275 | 		
 276 | 		// Repeat clustering step options.colorquantcycles times
 277 | 		for( cnt=0; cnt < options.colorquantcycles; cnt++ ){
 278 | 			
 279 | 			// Average colors from the second iteration
 280 | 			if(cnt>0){
 281 | 				// averaging paletteacc for palette
 282 | 				for( k=0; k < palette.length; k++ ){
 283 | 					
 284 | 					// averaging
 285 | 					if( paletteacc[k].n > 0 ){
 286 | 						palette[k] = {  r: Math.floor( paletteacc[k].r / paletteacc[k].n ),
 287 | 										g: Math.floor( paletteacc[k].g / paletteacc[k].n ),
 288 | 										b: Math.floor( paletteacc[k].b / paletteacc[k].n ),
 289 | 										a:  Math.floor( paletteacc[k].a / paletteacc[k].n ) };
 290 | 					}
 291 | 					
 292 | 					// Randomizing a color, if there are too few pixels and there will be a new cycle
 293 | 					if( ( paletteacc[k].n/pixelnum < options.mincolorratio ) && ( cnt < options.colorquantcycles-1 ) ){
 294 | 						palette[k] = {  r: Math.floor(Math.random()*255),
 295 | 										g: Math.floor(Math.random()*255),
 296 | 										b: Math.floor(Math.random()*255),
 297 | 										a: Math.floor(Math.random()*255) };
 298 | 					}
 299 | 					
 300 | 				}// End of palette loop
 301 | 			}// End of Average colors from the second iteration
 302 | 			
 303 | 			// Reseting palette accumulator for averaging
 304 | 			for( i=0; i < palette.length; i++ ){ paletteacc[i] = { r:0, g:0, b:0, a:0, n:0 }; }
 305 | 			
 306 | 			// loop through all pixels
 307 | 			for( j=0; j < imgd.height; j++ ){
 308 | 				for( i=0; i < imgd.width; i++ ){
 309 | 					
 310 | 					// pixel index
 311 | 					idx = (j*imgd.width+i)*4;
 312 | 					
 313 | 					// find closest color from palette by measuring (rectilinear) color distance between this pixel and all palette colors
 314 | 					ci=0; cdl = 1024; // 4 * 256 is the maximum RGBA distance
 315 | 					for( k=0; k<palette.length; k++ ){
 316 | 						
 317 | 						// In my experience, https://en.wikipedia.org/wiki/Rectilinear_distance works better than https://en.wikipedia.org/wiki/Euclidean_distance
 318 | 						cd = 
 319 | 							( palette[k].r > imgd.data[idx  ] ? palette[k].r - imgd.data[idx  ] : imgd.data[idx  ] - palette[k].r ) +
 320 | 							( palette[k].g > imgd.data[idx+1] ? palette[k].g - imgd.data[idx+1] : imgd.data[idx+1] - palette[k].g ) +
 321 | 							( palette[k].b > imgd.data[idx+2] ? palette[k].b - imgd.data[idx+2] : imgd.data[idx+2] - palette[k].b ) +
 322 | 							( palette[k].a > imgd.data[idx+3] ? palette[k].a - imgd.data[idx+3] : imgd.data[idx+3] - palette[k].a );
 323 | 						
 324 | 						// Remember this color if this is the closest yet
 325 | 						if(cd<cdl){ cdl = cd; ci = k; }
 326 | 						
 327 | 					}// End of palette loop
 328 | 					
 329 | 					// add to palettacc
 330 | 					paletteacc[ci].r += imgd.data[idx  ];
 331 | 					paletteacc[ci].g += imgd.data[idx+1];
 332 | 					paletteacc[ci].b += imgd.data[idx+2];
 333 | 					paletteacc[ci].a += imgd.data[idx+3];
 334 | 					paletteacc[ci].n++;
 335 | 					
 336 | 					// update the indexed color array
 337 | 					arr[j+1][i+1] = ci;
 338 | 					
 339 | 				}// End of i loop
 340 | 			}// End of j loop
 341 | 			
 342 | 		}// End of Repeat clustering step options.colorquantcycles times
 343 | 		
 344 | 		return { array:arr, palette:palette };
 345 | 		
 346 | 	},// End of colorquantization()
 347 | 	
 348 | 	// Sampling a palette from imagedata
 349 | 	this.samplepalette = function( numberofcolors, imgd ){
 350 | 		var idx, palette=[];
 351 | 		for(var i=0; i<numberofcolors; i++){
 352 | 			idx = Math.floor( Math.random() * imgd.data.length / 4 ) * 4;
 353 | 			palette.push({ r:imgd.data[idx  ], g:imgd.data[idx+1], b:imgd.data[idx+2], a:imgd.data[idx+3] });
 354 | 		}
 355 | 		return palette;
 356 | 	},// End of samplepalette()
 357 | 	
 358 | 	// Deterministic sampling a palette from imagedata: rectangular grid
 359 | 	this.samplepalette2 = function( numberofcolors, imgd ){
 360 | 		var idx, palette=[], ni = Math.ceil(Math.sqrt(numberofcolors)), nj = Math.ceil(numberofcolors/ni),
 361 | 			vx = imgd.width / (ni+1), vy = imgd.height / (nj+1);
 362 | 		for(var j=0; j<nj; j++){
 363 | 			for(var i=0; i<ni; i++){
 364 | 				if(palette.length === numberofcolors){
 365 | 					break;
 366 | 				}else{
 367 | 					idx = Math.floor( ((j+1)*vy) * imgd.width + ((i+1)*vx) ) * 4;
 368 | 					palette.push( { r:imgd.data[idx], g:imgd.data[idx+1], b:imgd.data[idx+2], a:imgd.data[idx+3] } );
 369 | 				}
 370 | 			}
 371 | 		}
 372 | 		return palette;
 373 | 	},// End of samplepalette2()
 374 | 	
 375 | 	// Generating a palette with numberofcolors
 376 | 	this.generatepalette = function(numberofcolors){
 377 | 		var palette = [], rcnt, gcnt, bcnt;
 378 | 		if(numberofcolors<8){
 379 | 			
 380 | 			// Grayscale
 381 | 			var graystep = Math.floor(255/(numberofcolors-1));
 382 | 			for(var i=0; i<numberofcolors; i++){ palette.push({ r:i*graystep, g:i*graystep, b:i*graystep, a:255 }); }
 383 | 			
 384 | 		}else{
 385 | 			
 386 | 			// RGB color cube
 387 | 			var colorqnum = Math.floor(Math.pow(numberofcolors, 1/3)), // Number of points on each edge on the RGB color cube
 388 | 				colorstep = Math.floor(255/(colorqnum-1)), // distance between points
 389 | 				rndnum = numberofcolors - colorqnum*colorqnum*colorqnum; // number of random colors
 390 | 			
 391 | 			for(rcnt=0; rcnt<colorqnum; rcnt++){
 392 | 				for(gcnt=0; gcnt<colorqnum; gcnt++){
 393 | 					for(bcnt=0; bcnt<colorqnum; bcnt++){
 394 | 						palette.push( { r:rcnt*colorstep, g:gcnt*colorstep, b:bcnt*colorstep, a:255 } );
 395 | 					}// End of blue loop
 396 | 				}// End of green loop
 397 | 			}// End of red loop
 398 | 			
 399 | 			// Rest is random
 400 | 			for(rcnt=0; rcnt<rndnum; rcnt++){ palette.push({ r:Math.floor(Math.random()*255), g:Math.floor(Math.random()*255), b:Math.floor(Math.random()*255), a:Math.floor(Math.random()*255) }); }
 401 | 
 402 | 		}// End of numberofcolors check
 403 | 		
 404 | 		return palette;
 405 | 	},// End of generatepalette()
 406 | 		
 407 | 	// 2. Layer separation and edge detection
 408 | 	// Edge node types ( ▓: this layer or 1; ░: not this layer or 0 )
 409 | 	// 12  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓
 410 | 	// 48  ░░  ░░  ░░  ░░  ░▓  ░▓  ░▓  ░▓  ▓░  ▓░  ▓░  ▓░  ▓▓  ▓▓  ▓▓  ▓▓
 411 | 	//     0   1   2   3   4   5   6   7   8   9   10  11  12  13  14  15
 412 | 	this.layering = function(ii){
 413 | 		// Creating layers for each indexed color in arr
 414 | 		var layers = [], val=0, ah = ii.array.length, aw = ii.array[0].length, n1,n2,n3,n4,n5,n6,n7,n8, i, j, k;
 415 | 		
 416 | 		// Create layers
 417 | 		for(k=0; k<ii.palette.length; k++){
 418 | 			layers[k] = [];
 419 | 			for(j=0; j<ah; j++){
 420 | 				layers[k][j] = [];
 421 | 				for(i=0; i<aw; i++){
 422 | 					layers[k][j][i]=0;
 423 | 				}
 424 | 			}
 425 | 		}
 426 | 		
 427 | 		// Looping through all pixels and calculating edge node type
 428 | 		for(j=1; j<ah-1; j++){
 429 | 			for(i=1; i<aw-1; i++){
 430 | 				
 431 | 				// This pixel's indexed color
 432 | 				val = ii.array[j][i];
 433 | 				
 434 | 				// Are neighbor pixel colors the same?
 435 | 				n1 = ii.array[j-1][i-1]===val ? 1 : 0;
 436 | 				n2 = ii.array[j-1][i  ]===val ? 1 : 0;
 437 | 				n3 = ii.array[j-1][i+1]===val ? 1 : 0;
 438 | 				n4 = ii.array[j  ][i-1]===val ? 1 : 0;
 439 | 				n5 = ii.array[j  ][i+1]===val ? 1 : 0;
 440 | 				n6 = ii.array[j+1][i-1]===val ? 1 : 0;
 441 | 				n7 = ii.array[j+1][i  ]===val ? 1 : 0;
 442 | 				n8 = ii.array[j+1][i+1]===val ? 1 : 0;
 443 | 				
 444 | 				// this pixel's type and looking back on previous pixels
 445 | 				layers[val][j+1][i+1] = 1 + n5 * 2 + n8 * 4 + n7 * 8 ;
 446 | 				if(!n4){ layers[val][j+1][i  ] = 0 + 2 + n7 * 4 + n6 * 8 ; }
 447 | 				if(!n2){ layers[val][j  ][i+1] = 0 + n3*2 + n5 * 4 + 8 ; }
 448 | 				if(!n1){ layers[val][j  ][i  ] = 0 + n2*2 + 4 + n4 * 8 ; }
 449 | 				
 450 | 			}// End of i loop
 451 | 		}// End of j loop
 452 | 		
 453 | 		return layers;
 454 | 	},// End of layering()
 455 | 	
 456 | 	// 2. Layer separation and edge detection
 457 | 	// Edge node types ( ▓: this layer or 1; ░: not this layer or 0 )
 458 | 	// 12  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓  ░░  ▓░  ░▓  ▓▓
 459 | 	// 48  ░░  ░░  ░░  ░░  ░▓  ░▓  ░▓  ░▓  ▓░  ▓░  ▓░  ▓░  ▓▓  ▓▓  ▓▓  ▓▓
 460 | 	//     0   1   2   3   4   5   6   7   8   9   10  11  12  13  14  15
 461 | 	this.layeringstep = function(ii,cnum){
 462 | 		// Creating layers for each indexed color in arr
 463 | 		var layer = [], val=0, ah = ii.array.length, aw = ii.array[0].length, n1,n2,n3,n4,n5,n6,n7,n8, i, j, k;
 464 | 		
 465 | 		// Create layer
 466 | 		for(j=0; j<ah; j++){
 467 | 			layer[j] = [];
 468 | 			for(i=0; i<aw; i++){
 469 | 				layer[j][i]=0;
 470 | 			}
 471 | 		}
 472 | 		
 473 | 		// Looping through all pixels and calculating edge node type
 474 | 		for(j=1; j<ah; j++){
 475 | 			for(i=1; i<aw; i++){
 476 | 				layer[j][i] =
 477 | 					( ii.array[j-1][i-1]===cnum ? 1 : 0 ) +
 478 | 					( ii.array[j-1][i]===cnum ? 2 : 0 ) +
 479 | 					( ii.array[j][i-1]===cnum ? 8 : 0 ) +
 480 | 					( ii.array[j][i]===cnum ? 4 : 0 )
 481 | 				;
 482 | 			}// End of i loop
 483 | 		}// End of j loop
 484 | 			
 485 | 		return layer;
 486 | 	},// End of layeringstep()
 487 | 	
 488 | 	// Point in polygon test
 489 | 	this.pointinpoly = function( p, pa ){
 490 | 		var isin=false;
 491 | 
 492 | 		for(var i=0,j=pa.length-1; i<pa.length; j=i++){
 493 | 			isin =
 494 | 				( ((pa[i].y > p.y) !== (pa[j].y > p.y)) && (p.x < (pa[j].x - pa[i].x) * (p.y - pa[i].y) / (pa[j].y - pa[i].y) + pa[i].x) )
 495 | 				? !isin : isin;
 496 | 		}
 497 | 
 498 | 		return isin;
 499 | 	},
 500 | 	
 501 | 	// Lookup tables for pathscan
 502 | 	// pathscan_combined_lookup[ arr[py][px] ][ dir ] = [nextarrpypx, nextdir, deltapx, deltapy];
 503 | 	this.pathscan_combined_lookup = [
 504 | 		[[-1,-1,-1,-1], [-1,-1,-1,-1], [-1,-1,-1,-1], [-1,-1,-1,-1]],// arr[py][px]===0 is invalid
 505 | 		[[ 0, 1, 0,-1], [-1,-1,-1,-1], [-1,-1,-1,-1], [ 0, 2,-1, 0]],
 506 | 		[[-1,-1,-1,-1], [-1,-1,-1,-1], [ 0, 1, 0,-1], [ 0, 0, 1, 0]],
 507 | 		[[ 0, 0, 1, 0], [-1,-1,-1,-1], [ 0, 2,-1, 0], [-1,-1,-1,-1]],
 508 | 		
 509 | 		[[-1,-1,-1,-1], [ 0, 0, 1, 0], [ 0, 3, 0, 1], [-1,-1,-1,-1]],
 510 | 		[[13, 3, 0, 1], [13, 2,-1, 0], [ 7, 1, 0,-1], [ 7, 0, 1, 0]],
 511 | 		[[-1,-1,-1,-1], [ 0, 1, 0,-1], [-1,-1,-1,-1], [ 0, 3, 0, 1]],
 512 | 		[[ 0, 3, 0, 1], [ 0, 2,-1, 0], [-1,-1,-1,-1], [-1,-1,-1,-1]],
 513 | 		
 514 | 		[[ 0, 3, 0, 1], [ 0, 2,-1, 0], [-1,-1,-1,-1], [-1,-1,-1,-1]],
 515 | 		[[-1,-1,-1,-1], [ 0, 1, 0,-1], [-1,-1,-1,-1], [ 0, 3, 0, 1]],
 516 | 		[[11, 1, 0,-1], [14, 0, 1, 0], [14, 3, 0, 1], [11, 2,-1, 0]],
 517 | 		[[-1,-1,-1,-1], [ 0, 0, 1, 0], [ 0, 3, 0, 1], [-1,-1,-1,-1]],
 518 | 		
 519 | 		[[ 0, 0, 1, 0], [-1,-1,-1,-1], [ 0, 2,-1, 0], [-1,-1,-1,-1]],
 520 | 		[[-1,-1,-1,-1], [-1,-1,-1,-1], [ 0, 1, 0,-1], [ 0, 0, 1, 0]],
 521 | 		[[ 0, 1, 0,-1], [-1,-1,-1,-1], [-1,-1,-1,-1], [ 0, 2,-1, 0]],
 522 | 		[[-1,-1,-1,-1], [-1,-1,-1,-1], [-1,-1,-1,-1], [-1,-1,-1,-1]]// arr[py][px]===15 is invalid
 523 | 	],
 524 | 
 525 | 	// 3. Walking through an edge node array, discarding edge node types 0 and 15 and creating paths from the rest.
 526 | 	// Walk directions (dir): 0 > ; 1 ^ ; 2 < ; 3 v 
 527 | 	this.pathscan = function( arr, pathomit ){
 528 | 		var paths=[], pacnt=0, pcnt=0, px=0, py=0, w = arr[0].length, h = arr.length,
 529 | 			dir=0, pathfinished=true, holepath=false, lookuprow;
 530 | 		
 531 | 		for(var j=0; j<h; j++){
 532 | 			for(var i=0; i<w; i++){
 533 | 				if( (arr[j][i] == 4) || ( arr[j][i] == 11) ){ // Other values are not valid
 534 | 					
 535 | 					// Init
 536 | 					px = i; py = j;
 537 | 					paths[pacnt] = {};
 538 | 					paths[pacnt].points = [];
 539 | 					paths[pacnt].boundingbox = [px,py,px,py];
 540 | 					paths[pacnt].holechildren = [];
 541 | 					pathfinished = false;
 542 | 					pcnt=0;
 543 | 					holepath = (arr[j][i]==11);
 544 | 					dir = 1;
 545 | 
 546 | 					// Path points loop
 547 | 					while(!pathfinished){
 548 | 						
 549 | 						// New path point
 550 | 						paths[pacnt].points[pcnt] = {};
 551 | 						paths[pacnt].points[pcnt].x = px-1;
 552 | 						paths[pacnt].points[pcnt].y = py-1;
 553 | 						paths[pacnt].points[pcnt].t = arr[py][px];
 554 | 						
 555 | 						// Bounding box
 556 | 						if( (px-1) < paths[pacnt].boundingbox[0] ){ paths[pacnt].boundingbox[0] = px-1; }
 557 | 						if( (px-1) > paths[pacnt].boundingbox[2] ){ paths[pacnt].boundingbox[2] = px-1; }
 558 | 						if( (py-1) < paths[pacnt].boundingbox[1] ){ paths[pacnt].boundingbox[1] = py-1; }
 559 | 						if( (py-1) > paths[pacnt].boundingbox[3] ){ paths[pacnt].boundingbox[3] = py-1; }
 560 | 						
 561 | 						// Next: look up the replacement, direction and coordinate changes = clear this cell, turn if required, walk forward
 562 | 						lookuprow = _this.pathscan_combined_lookup[ arr[py][px] ][ dir ];
 563 | 						arr[py][px] = lookuprow[0]; dir = lookuprow[1]; px += lookuprow[2]; py += lookuprow[3];
 564 | 
 565 | 						// Close path
 566 | 						if( (px-1 === paths[pacnt].points[0].x ) && ( py-1 === paths[pacnt].points[0].y ) ){
 567 | 							pathfinished = true;
 568 | 							
 569 | 							// Discarding paths shorter than pathomit
 570 | 							if( paths[pacnt].points.length < pathomit ){
 571 | 								paths.pop();
 572 | 							}else{
 573 | 							
 574 | 								paths[pacnt].isholepath = holepath ? true : false;
 575 | 								
 576 | 								// Finding the parent shape for this hole
 577 | 								if(holepath){
 578 | 									
 579 | 									var parentidx = 0, parentbbox = [-1,-1,w+1,h+1];
 580 | 									for(var parentcnt=0; parentcnt < pacnt; parentcnt++){
 581 | 										if( (!paths[parentcnt].isholepath) &&
 582 | 											_this.boundingboxincludes( paths[parentcnt].boundingbox , paths[pacnt].boundingbox ) &&
 583 | 											_this.boundingboxincludes( parentbbox , paths[parentcnt].boundingbox ) &&
 584 | 											_this.pointinpoly( paths[pacnt].points[0], paths[parentcnt].points )
 585 | 										){
 586 | 											parentidx = parentcnt;
 587 | 											parentbbox = paths[parentcnt].boundingbox;
 588 | 										}
 589 | 									}
 590 | 									
 591 | 									paths[parentidx].holechildren.push( pacnt );
 592 | 									
 593 | 								}// End of holepath parent finding
 594 | 								
 595 | 								pacnt++;
 596 | 							
 597 | 							}
 598 | 							
 599 | 						}// End of Close path
 600 | 						
 601 | 						pcnt++;
 602 | 						
 603 | 					}// End of Path points loop
 604 | 					
 605 | 				}// End of Follow path
 606 | 				
 607 | 			}// End of i loop
 608 | 		}// End of j loop
 609 | 		
 610 | 		return paths;
 611 | 	},// End of pathscan()
 612 | 	
 613 | 	this.boundingboxincludes = function( parentbbox, childbbox ){
 614 | 		return ( ( parentbbox[0] < childbbox[0] ) && ( parentbbox[1] < childbbox[1] ) && ( parentbbox[2] > childbbox[2] ) && ( parentbbox[3] > childbbox[3] ) );
 615 | 	},// End of boundingboxincludes()
 616 | 	
 617 | 	// 3. Batch pathscan
 618 | 	this.batchpathscan = function( layers, pathomit ){
 619 | 		var bpaths = [];
 620 | 		for(var k in layers){
 621 | 			if(!layers.hasOwnProperty(k)){ continue; }
 622 | 			bpaths[k] = _this.pathscan( layers[k], pathomit );
 623 | 		}
 624 | 		return bpaths;
 625 | 	},
 626 | 	
 627 | 	// 4. interpollating between path points for nodes with 8 directions ( East, SouthEast, S, SW, W, NW, N, NE )
 628 | 	this.internodes = function( paths, options ){
 629 | 		var ins = [], palen=0, nextidx=0, nextidx2=0, previdx=0, previdx2=0, pacnt, pcnt;
 630 | 		
 631 | 		// paths loop
 632 | 		for(pacnt=0; pacnt<paths.length; pacnt++){
 633 | 			
 634 | 			ins[pacnt] = {};
 635 | 			ins[pacnt].points = [];
 636 | 			ins[pacnt].boundingbox = paths[pacnt].boundingbox;
 637 | 			ins[pacnt].holechildren = paths[pacnt].holechildren;
 638 | 			ins[pacnt].isholepath = paths[pacnt].isholepath;
 639 | 			palen = paths[pacnt].points.length;
 640 | 			
 641 | 			// pathpoints loop
 642 | 			for(pcnt=0; pcnt<palen; pcnt++){
 643 | 			
 644 | 				// next and previous point indexes
 645 | 				nextidx = (pcnt+1)%palen; nextidx2 = (pcnt+2)%palen; previdx = (pcnt-1+palen)%palen; previdx2 = (pcnt-2+palen)%palen;
 646 | 				
 647 | 				// right angle enhance
 648 | 				if( options.rightangleenhance && _this.testrightangle( paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2 ) ){
 649 | 					
 650 | 					// Fix previous direction
 651 | 					if(ins[pacnt].points.length > 0){
 652 | 						ins[pacnt].points[ ins[pacnt].points.length-1 ].linesegment = _this.getdirection(
 653 | 								ins[pacnt].points[ ins[pacnt].points.length-1 ].x,
 654 | 								ins[pacnt].points[ ins[pacnt].points.length-1 ].y,
 655 | 								paths[pacnt].points[pcnt].x,
 656 | 								paths[pacnt].points[pcnt].y
 657 | 							);
 658 | 					}
 659 | 					
 660 | 					// This corner point
 661 | 					ins[pacnt].points.push({
 662 | 						x : paths[pacnt].points[pcnt].x,
 663 | 						y : paths[pacnt].points[pcnt].y,
 664 | 						linesegment : _this.getdirection(
 665 | 								paths[pacnt].points[pcnt].x,
 666 | 								paths[pacnt].points[pcnt].y,
 667 | 								(( paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x ) /2),
 668 | 								(( paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y ) /2)
 669 | 							)
 670 | 					});
 671 | 					
 672 | 				}// End of right angle enhance
 673 | 				
 674 | 				// interpolate between two path points
 675 | 				ins[pacnt].points.push({
 676 | 					x : (( paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x ) /2),
 677 | 					y : (( paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y ) /2),
 678 | 					linesegment : _this.getdirection(
 679 | 							(( paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x ) /2),
 680 | 							(( paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y ) /2),
 681 | 							(( paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x ) /2),
 682 | 							(( paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y ) /2)
 683 | 						)
 684 | 				});
 685 | 				
 686 | 			}// End of pathpoints loop
 687 | 						
 688 | 		}// End of paths loop
 689 | 		
 690 | 		return ins;
 691 | 	},// End of internodes()
 692 | 	
 693 | 	this.testrightangle = function( path, idx1, idx2, idx3, idx4, idx5 ){
 694 | 		return ( (( path.points[idx3].x === path.points[idx1].x) &&
 695 | 				  ( path.points[idx3].x === path.points[idx2].x) &&
 696 | 				  ( path.points[idx3].y === path.points[idx4].y) &&
 697 | 				  ( path.points[idx3].y === path.points[idx5].y)
 698 | 				 ) ||
 699 | 				 (( path.points[idx3].y === path.points[idx1].y) &&
 700 | 				  ( path.points[idx3].y === path.points[idx2].y) &&
 701 | 				  ( path.points[idx3].x === path.points[idx4].x) &&
 702 | 				  ( path.points[idx3].x === path.points[idx5].x)
 703 | 				 )
 704 | 		);
 705 | 	},// End of testrightangle()
 706 | 	
 707 | 	this.getdirection = function( x1, y1, x2, y2 ){
 708 | 		var val = 8;
 709 | 		if(x1 < x2){
 710 | 			if     (y1 < y2){ val = 1; }// SouthEast
 711 | 			else if(y1 > y2){ val = 7; }// NE
 712 | 			else            { val = 0; }// E
 713 | 		}else if(x1 > x2){
 714 | 			if     (y1 < y2){ val = 3; }// SW
 715 | 			else if(y1 > y2){ val = 5; }// NW
 716 | 			else            { val = 4; }// W
 717 | 		}else{
 718 | 			if     (y1 < y2){ val = 2; }// S
 719 | 			else if(y1 > y2){ val = 6; }// N
 720 | 			else            { val = 8; }// center, this should not happen
 721 | 		}
 722 | 		return val;
 723 | 	},// End of getdirection()
 724 | 	
 725 | 	// 4. Batch interpollation
 726 | 	this.batchinternodes = function( bpaths, options ){
 727 | 		var binternodes = [];
 728 | 		for (var k in bpaths) {
 729 | 			if(!bpaths.hasOwnProperty(k)){ continue; }
 730 | 			binternodes[k] = _this.internodes(bpaths[k], options);
 731 | 		}
 732 | 		return binternodes;
 733 | 	},
 734 | 	
 735 | 	// 5. tracepath() : recursively trying to fit straight and quadratic spline segments on the 8 direction internode path
 736 | 	
 737 | 	// 5.1. Find sequences of points with only 2 segment types
 738 | 	// 5.2. Fit a straight line on the sequence
 739 | 	// 5.3. If the straight line fails (distance error > ltres), find the point with the biggest error
 740 | 	// 5.4. Fit a quadratic spline through errorpoint (project this to get controlpoint), then measure errors on every point in the sequence
 741 | 	// 5.5. If the spline fails (distance error > qtres), find the point with the biggest error, set splitpoint = fitting point
 742 | 	// 5.6. Split sequence and recursively apply 5.2. - 5.6. to startpoint-splitpoint and splitpoint-endpoint sequences
 743 | 	
 744 | 	this.tracepath = function( path, ltres, qtres ){
 745 | 		var pcnt=0, segtype1, segtype2, seqend, smp = {};
 746 | 		smp.segments = [];
 747 | 		smp.boundingbox = path.boundingbox;
 748 | 		smp.holechildren = path.holechildren;
 749 | 		smp.isholepath = path.isholepath;
 750 | 		
 751 | 		while(pcnt < path.points.length){
 752 | 			// 5.1. Find sequences of points with only 2 segment types
 753 | 			segtype1 = path.points[pcnt].linesegment; segtype2 = -1; seqend=pcnt+1;
 754 | 			while(
 755 | 				((path.points[seqend].linesegment === segtype1) || (path.points[seqend].linesegment === segtype2) || (segtype2 === -1))
 756 | 				&& (seqend < path.points.length-1) ){
 757 | 				
 758 | 				if((path.points[seqend].linesegment!==segtype1) && (segtype2===-1)){ segtype2 = path.points[seqend].linesegment; }
 759 | 				seqend++;
 760 | 				
 761 | 			}
 762 | 			if(seqend === path.points.length-1){ seqend = 0; }
 763 | 
 764 | 			// 5.2. - 5.6. Split sequence and recursively apply 5.2. - 5.6. to startpoint-splitpoint and splitpoint-endpoint sequences
 765 | 			smp.segments = smp.segments.concat( _this.fitseq(path, ltres, qtres, pcnt, seqend) );
 766 | 			
 767 | 			// forward pcnt;
 768 | 			if(seqend>0){ pcnt = seqend; }else{ pcnt = path.points.length; }
 769 | 			
 770 | 		}// End of pcnt loop
 771 | 		
 772 | 		return smp;
 773 | 	},// End of tracepath()
 774 | 		
 775 | 	// 5.2. - 5.6. recursively fitting a straight or quadratic line segment on this sequence of path nodes,
 776 | 	// called from tracepath()
 777 | 	this.fitseq = function( path, ltres, qtres, seqstart, seqend ){
 778 | 		// return if invalid seqend
 779 | 		if( (seqend>path.points.length) || (seqend<0) ){ return []; }
 780 | 		// variables
 781 | 		var errorpoint=seqstart, errorval=0, curvepass=true, px, py, dist2;
 782 | 		var tl = (seqend-seqstart); if(tl<0){ tl += path.points.length; }
 783 | 		var vx = (path.points[seqend].x-path.points[seqstart].x) / tl,
 784 | 			vy = (path.points[seqend].y-path.points[seqstart].y) / tl;
 785 | 		
 786 | 		// 5.2. Fit a straight line on the sequence
 787 | 		var pcnt = (seqstart+1) % path.points.length, pl;
 788 | 		while(pcnt != seqend){
 789 | 			pl = pcnt-seqstart; if(pl<0){ pl += path.points.length; }
 790 | 			px = path.points[seqstart].x + vx * pl; py = path.points[seqstart].y + vy * pl;
 791 | 			dist2 = (path.points[pcnt].x-px)*(path.points[pcnt].x-px) + (path.points[pcnt].y-py)*(path.points[pcnt].y-py);
 792 | 			if(dist2>ltres){curvepass=false;}
 793 | 			if(dist2>errorval){ errorpoint=pcnt; errorval=dist2; }
 794 | 			pcnt = (pcnt+1)%path.points.length;
 795 | 		}
 796 | 		// return straight line if fits
 797 | 		if(curvepass){ return [{ type:'L', x1:path.points[seqstart].x, y1:path.points[seqstart].y, x2:path.points[seqend].x, y2:path.points[seqend].y }]; }
 798 | 		
 799 | 		// 5.3. If the straight line fails (distance error>ltres), find the point with the biggest error
 800 | 		var fitpoint = errorpoint; curvepass = true; errorval = 0;
 801 | 		
 802 | 		// 5.4. Fit a quadratic spline through this point, measure errors on every point in the sequence
 803 | 		// helpers and projecting to get control point
 804 | 		var t=(fitpoint-seqstart)/tl, t1=(1-t)*(1-t), t2=2*(1-t)*t, t3=t*t;
 805 | 		var cpx = (t1*path.points[seqstart].x + t3*path.points[seqend].x - path.points[fitpoint].x)/-t2 ,
 806 | 			cpy = (t1*path.points[seqstart].y + t3*path.points[seqend].y - path.points[fitpoint].y)/-t2 ;
 807 | 		
 808 | 		// Check every point
 809 | 		pcnt = seqstart+1;
 810 | 		while(pcnt != seqend){
 811 | 			t=(pcnt-seqstart)/tl; t1=(1-t)*(1-t); t2=2*(1-t)*t; t3=t*t;
 812 | 			px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x;
 813 | 			py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y;
 814 | 			
 815 | 			dist2 = (path.points[pcnt].x-px)*(path.points[pcnt].x-px) + (path.points[pcnt].y-py)*(path.points[pcnt].y-py);
 816 | 			
 817 | 			if(dist2>qtres){curvepass=false;}
 818 | 			if(dist2>errorval){ errorpoint=pcnt; errorval=dist2; }
 819 | 			pcnt = (pcnt+1)%path.points.length;
 820 | 		}
 821 | 		// return spline if fits
 822 | 		if(curvepass){ return [{ type:'Q', x1:path.points[seqstart].x, y1:path.points[seqstart].y, x2:cpx, y2:cpy, x3:path.points[seqend].x, y3:path.points[seqend].y }]; }
 823 | 		// 5.5. If the spline fails (distance error>qtres), find the point with the biggest error
 824 | 		var splitpoint = fitpoint; // Earlier: Math.floor((fitpoint + errorpoint)/2);
 825 | 		
 826 | 		// 5.6. Split sequence and recursively apply 5.2. - 5.6. to startpoint-splitpoint and splitpoint-endpoint sequences
 827 | 		return _this.fitseq( path, ltres, qtres, seqstart, splitpoint ).concat(
 828 | 				_this.fitseq( path, ltres, qtres, splitpoint, seqend ) );
 829 | 		
 830 | 	},// End of fitseq()
 831 | 	
 832 | 	// 5. Batch tracing paths
 833 | 	this.batchtracepaths = function(internodepaths,ltres,qtres){
 834 | 		var btracedpaths = [];
 835 | 		for(var k in internodepaths){
 836 | 			if(!internodepaths.hasOwnProperty(k)){ continue; }
 837 | 			btracedpaths.push( _this.tracepath(internodepaths[k],ltres,qtres) );
 838 | 		}
 839 | 		return btracedpaths;
 840 | 	},
 841 | 	
 842 | 	// 5. Batch tracing layers
 843 | 	this.batchtracelayers = function(binternodes, ltres, qtres){
 844 | 		var btbis = [];
 845 | 		for(var k in binternodes){
 846 | 			if(!binternodes.hasOwnProperty(k)){ continue; }
 847 | 			btbis[k] = _this.batchtracepaths(binternodes[k], ltres, qtres);
 848 | 		}
 849 | 		return btbis;
 850 | 	},
 851 | 	
 852 | 	////////////////////////////////////////////////////////////
 853 | 	//
 854 | 	//  SVG Drawing functions
 855 | 	//
 856 | 	////////////////////////////////////////////////////////////
 857 | 	
 858 | 	// Rounding to given decimals https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-in-javascript
 859 | 	this.roundtodec = function(val,places){ return +val.toFixed(places); },
 860 | 	
 861 | 	// Getting SVG path element string from a traced path
 862 | 	this.svgpathstring = function( tracedata, lnum, pathnum, options ){
 863 | 		
 864 | 		var layer = tracedata.layers[lnum], smp = layer[pathnum], str='', pcnt;
 865 | 		
 866 | 		// Line filter
 867 | 		if(options.linefilter && (smp.segments.length < 3)){ return str; }
 868 | 		
 869 | 		// Starting path element, desc contains layer and path number
 870 | 		str = '<path '+
 871 | 			( options.desc ? ('desc="l '+lnum+' p '+pathnum+'" ') : '' ) +
 872 | 			_this.tosvgcolorstr(tracedata.palette[lnum], options) +
 873 | 			'd="';
 874 | 		
 875 | 		// Creating non-hole path string
 876 | 		if( options.roundcoords === -1 ){
 877 | 			str += 'M '+ smp.segments[0].x1 * options.scale +' '+ smp.segments[0].y1 * options.scale +' ';
 878 | 			for(pcnt=0; pcnt<smp.segments.length; pcnt++){
 879 | 				str += smp.segments[pcnt].type +' '+ smp.segments[pcnt].x2 * options.scale +' '+ smp.segments[pcnt].y2 * options.scale +' ';
 880 | 				if(smp.segments[pcnt].hasOwnProperty('x3')){
 881 | 					str += smp.segments[pcnt].x3 * options.scale +' '+ smp.segments[pcnt].y3 * options.scale +' ';
 882 | 				}
 883 | 			}
 884 | 			str += 'Z ';
 885 | 		}else{
 886 | 			str += 'M '+ _this.roundtodec( smp.segments[0].x1 * options.scale, options.roundcoords ) +' '+ _this.roundtodec( smp.segments[0].y1 * options.scale, options.roundcoords ) +' ';
 887 | 			for(pcnt=0; pcnt<smp.segments.length; pcnt++){
 888 | 				str += smp.segments[pcnt].type +' '+ _this.roundtodec( smp.segments[pcnt].x2 * options.scale, options.roundcoords ) +' '+ _this.roundtodec( smp.segments[pcnt].y2 * options.scale, options.roundcoords ) +' ';
 889 | 				if(smp.segments[pcnt].hasOwnProperty('x3')){
 890 | 					str += _this.roundtodec( smp.segments[pcnt].x3 * options.scale, options.roundcoords ) +' '+ _this.roundtodec( smp.segments[pcnt].y3 * options.scale, options.roundcoords ) +' ';
 891 | 				}
 892 | 			}
 893 | 			str += 'Z ';
 894 | 		}// End of creating non-hole path string
 895 | 		
 896 | 		// Hole children
 897 | 		for( var hcnt=0; hcnt < smp.holechildren.length; hcnt++){
 898 | 			var hsmp = layer[ smp.holechildren[hcnt] ];
 899 | 			// Creating hole path string
 900 | 			if( options.roundcoords === -1 ){
 901 | 				
 902 | 				if(hsmp.segments[ hsmp.segments.length-1 ].hasOwnProperty('x3')){
 903 | 					str += 'M '+ hsmp.segments[ hsmp.segments.length-1 ].x3 * options.scale +' '+ hsmp.segments[ hsmp.segments.length-1 ].y3 * options.scale +' ';
 904 | 				}else{
 905 | 					str += 'M '+ hsmp.segments[ hsmp.segments.length-1 ].x2 * options.scale +' '+ hsmp.segments[ hsmp.segments.length-1 ].y2 * options.scale +' ';
 906 | 				}
 907 | 				
 908 | 				for(pcnt = hsmp.segments.length-1; pcnt >= 0; pcnt--){
 909 | 					str += hsmp.segments[pcnt].type +' ';
 910 | 					if(hsmp.segments[pcnt].hasOwnProperty('x3')){
 911 | 						str += hsmp.segments[pcnt].x2 * options.scale +' '+ hsmp.segments[pcnt].y2 * options.scale +' ';
 912 | 					}
 913 | 					
 914 | 					str += hsmp.segments[pcnt].x1 * options.scale +' '+ hsmp.segments[pcnt].y1 * options.scale +' ';
 915 | 				}
 916 | 				
 917 | 			}else{
 918 | 				
 919 | 				if(hsmp.segments[ hsmp.segments.length-1 ].hasOwnProperty('x3')){
 920 | 					str += 'M '+ _this.roundtodec( hsmp.segments[ hsmp.segments.length-1 ].x3 * options.scale ) +' '+ _this.roundtodec( hsmp.segments[ hsmp.segments.length-1 ].y3 * options.scale ) +' ';
 921 | 				}else{
 922 | 					str += 'M '+ _this.roundtodec( hsmp.segments[ hsmp.segments.length-1 ].x2 * options.scale ) +' '+ _this.roundtodec( hsmp.segments[ hsmp.segments.length-1 ].y2 * options.scale ) +' ';
 923 | 				}
 924 | 				
 925 | 				for(pcnt = hsmp.segments.length-1; pcnt >= 0; pcnt--){
 926 | 					str += hsmp.segments[pcnt].type +' ';
 927 | 					if(hsmp.segments[pcnt].hasOwnProperty('x3')){
 928 | 						str += _this.roundtodec( hsmp.segments[pcnt].x2 * options.scale ) +' '+ _this.roundtodec( hsmp.segments[pcnt].y2 * options.scale ) +' ';
 929 | 					}
 930 | 					str += _this.roundtodec( hsmp.segments[pcnt].x1 * options.scale ) +' '+ _this.roundtodec( hsmp.segments[pcnt].y1 * options.scale ) +' ';
 931 | 				}
 932 | 				
 933 | 				
 934 | 			}// End of creating hole path string
 935 | 			
 936 | 			str += 'Z '; // Close path
 937 | 			
 938 | 		}// End of holepath check
 939 | 		
 940 | 		// Closing path element
 941 | 		str += '" />';
 942 | 		
 943 | 		// Rendering control points
 944 | 		if(options.lcpr || options.qcpr){
 945 | 			for(pcnt=0; pcnt<smp.segments.length; pcnt++){
 946 | 				if( smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr ){
 947 | 					str += '<circle cx="'+ smp.segments[pcnt].x2 * options.scale +'" cy="'+ smp.segments[pcnt].y2 * options.scale +'" r="'+ options.qcpr +'" fill="cyan" stroke-width="'+ options.qcpr * 0.2 +'" stroke="black" />';
 948 | 					str += '<circle cx="'+ smp.segments[pcnt].x3 * options.scale +'" cy="'+ smp.segments[pcnt].y3 * options.scale +'" r="'+ options.qcpr +'" fill="white" stroke-width="'+ options.qcpr * 0.2 +'" stroke="black" />';
 949 | 					str += '<line x1="'+ smp.segments[pcnt].x1 * options.scale +'" y1="'+ smp.segments[pcnt].y1 * options.scale +'" x2="'+ smp.segments[pcnt].x2 * options.scale +'" y2="'+ smp.segments[pcnt].y2 * options.scale +'" stroke-width="'+ options.qcpr * 0.2 +'" stroke="cyan" />';
 950 | 					str += '<line x1="'+ smp.segments[pcnt].x2 * options.scale +'" y1="'+ smp.segments[pcnt].y2 * options.scale +'" x2="'+ smp.segments[pcnt].x3 * options.scale +'" y2="'+ smp.segments[pcnt].y3 * options.scale +'" stroke-width="'+ options.qcpr * 0.2 +'" stroke="cyan" />';
 951 | 				}
 952 | 				if( (!smp.segments[pcnt].hasOwnProperty('x3')) && options.lcpr){
 953 | 					str += '<circle cx="'+ smp.segments[pcnt].x2 * options.scale +'" cy="'+ smp.segments[pcnt].y2 * options.scale +'" r="'+ options.lcpr +'" fill="white" stroke-width="'+ options.lcpr * 0.2 +'" stroke="black" />';
 954 | 				}
 955 | 			}
 956 | 			
 957 | 			// Hole children control points
 958 | 			for( var hcnt=0; hcnt < smp.holechildren.length; hcnt++){
 959 | 				var hsmp = layer[ smp.holechildren[hcnt] ];
 960 | 				for(pcnt=0; pcnt<hsmp.segments.length; pcnt++){
 961 | 					if( hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr ){
 962 | 						str += '<circle cx="'+ hsmp.segments[pcnt].x2 * options.scale +'" cy="'+ hsmp.segments[pcnt].y2 * options.scale +'" r="'+ options.qcpr +'" fill="cyan" stroke-width="'+ options.qcpr * 0.2 +'" stroke="black" />';
 963 | 						str += '<circle cx="'+ hsmp.segments[pcnt].x3 * options.scale +'" cy="'+ hsmp.segments[pcnt].y3 * options.scale +'" r="'+ options.qcpr +'" fill="white" stroke-width="'+ options.qcpr * 0.2 +'" stroke="black" />';
 964 | 						str += '<line x1="'+ hsmp.segments[pcnt].x1 * options.scale +'" y1="'+ hsmp.segments[pcnt].y1 * options.scale +'" x2="'+ hsmp.segments[pcnt].x2 * options.scale +'" y2="'+ hsmp.segments[pcnt].y2 * options.scale +'" stroke-width="'+ options.qcpr * 0.2 +'" stroke="cyan" />';
 965 | 						str += '<line x1="'+ hsmp.segments[pcnt].x2 * options.scale +'" y1="'+ hsmp.segments[pcnt].y2 * options.scale +'" x2="'+ hsmp.segments[pcnt].x3 * options.scale +'" y2="'+ hsmp.segments[pcnt].y3 * options.scale +'" stroke-width="'+ options.qcpr * 0.2 +'" stroke="cyan" />';
 966 | 					}
 967 | 					if( (!hsmp.segments[pcnt].hasOwnProperty('x3')) && options.lcpr){
 968 | 						str += '<circle cx="'+ hsmp.segments[pcnt].x2 * options.scale +'" cy="'+ hsmp.segments[pcnt].y2 * options.scale +'" r="'+ options.lcpr +'" fill="white" stroke-width="'+ options.lcpr * 0.2 +'" stroke="black" />';
 969 | 					}
 970 | 				}
 971 | 			}
 972 | 		}// End of Rendering control points
 973 | 			
 974 | 		return str;
 975 | 		
 976 | 	},// End of svgpathstring()
 977 | 	
 978 | 	// Converting tracedata to an SVG string
 979 | 	this.getsvgstring = function( tracedata, options ){
 980 | 		
 981 | 		options = _this.checkoptions(options);
 982 | 		
 983 | 		var w = tracedata.width * options.scale, h = tracedata.height * options.scale;
 984 | 		
 985 | 		// SVG start
 986 | 		var svgstr = '<svg ' + (options.viewbox ? ('viewBox="0 0 '+w+' '+h+'" ') : ('width="'+w+'" height="'+h+'" ')) +
 987 | 			'version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version '+_this.versionnumber+'" >';
 988 | 
 989 | 		// Drawing: Layers and Paths loops
 990 | 		for(var lcnt=0; lcnt < tracedata.layers.length; lcnt++){
 991 | 			for(var pcnt=0; pcnt < tracedata.layers[lcnt].length; pcnt++){
 992 | 				
 993 | 				// Adding SVG <path> string
 994 | 				if( !tracedata.layers[lcnt][pcnt].isholepath ){
 995 | 					svgstr += _this.svgpathstring( tracedata, lcnt, pcnt, options );
 996 | 				}
 997 | 					
 998 | 			}// End of paths loop
 999 | 		}// End of layers loop
1000 | 		
1001 | 		// SVG End
1002 | 		svgstr+='</svg>';
1003 | 		
1004 | 		return svgstr;
1005 | 		
1006 | 	},// End of getsvgstring()
1007 | 	
1008 | 	// Comparator for numeric Array.sort
1009 | 	this.compareNumbers = function(a,b){ return a - b; },
1010 | 	
1011 | 	// Convert color object to rgba string
1012 | 	this.torgbastr = function(c){ return 'rgba('+c.r+','+c.g+','+c.b+','+c.a+')'; },
1013 | 	
1014 | 	// Convert color object to SVG color string
1015 | 	this.tosvgcolorstr = function(c, options){
1016 | 		return 'fill="rgb('+c.r+','+c.g+','+c.b+')" stroke="rgb('+c.r+','+c.g+','+c.b+')" stroke-width="'+options.strokewidth+'" opacity="'+c.a/255.0+'" ';
1017 | 	},
1018 | 	
1019 | 	// Helper function: Appending an <svg> element to a container from an svgstring
1020 | 	this.appendSVGString = function(svgstr,parentid){
1021 | 		var div;
1022 | 		if(parentid){
1023 | 			div = document.getElementById(parentid);
1024 | 			if(!div){
1025 | 				div = document.createElement('div');
1026 | 				div.id = parentid;
1027 | 				document.body.appendChild(div);
1028 | 			}
1029 | 		}else{
1030 | 			div = document.createElement('div');
1031 | 			document.body.appendChild(div);
1032 | 		}
1033 | 		div.innerHTML += svgstr;
1034 | 	},
1035 | 	
1036 | 	////////////////////////////////////////////////////////////
1037 | 	//
1038 | 	//  Canvas functions
1039 | 	//
1040 | 	////////////////////////////////////////////////////////////
1041 | 	
1042 | 	// Gaussian kernels for blur
1043 | 	this.gks = [ [0.27901,0.44198,0.27901], [0.135336,0.228569,0.272192,0.228569,0.135336], [0.086776,0.136394,0.178908,0.195843,0.178908,0.136394,0.086776],
1044 | 	             [0.063327,0.093095,0.122589,0.144599,0.152781,0.144599,0.122589,0.093095,0.063327], [0.049692,0.069304,0.089767,0.107988,0.120651,0.125194,0.120651,0.107988,0.089767,0.069304,0.049692] ],
1045 | 	
1046 | 	// Selective Gaussian blur for preprocessing
1047 | 	this.blur = function(imgd,radius,delta){
1048 | 		var i,j,k,d,idx,racc,gacc,bacc,aacc,wacc;
1049 | 		
1050 | 		// new ImageData
1051 | 		var imgd2 = { width:imgd.width, height:imgd.height, data:[] };
1052 | 		
1053 | 		// radius and delta limits, this kernel
1054 | 		radius = Math.floor(radius); if(radius<1){ return imgd; } if(radius>5){ radius = 5; } delta = Math.abs( delta ); if(delta>1024){ delta = 1024; }
1055 | 		var thisgk = _this.gks[radius-1];
1056 | 		
1057 | 		// loop through all pixels, horizontal blur
1058 | 		for( j=0; j < imgd.height; j++ ){
1059 | 			for( i=0; i < imgd.width; i++ ){
1060 | 
1061 | 				racc = 0; gacc = 0; bacc = 0; aacc = 0; wacc = 0;
1062 | 				// gauss kernel loop
1063 | 				for( k = -radius; k < radius+1; k++){
1064 | 					// add weighted color values
1065 | 					if( (i+k > 0) && (i+k < imgd.width) ){
1066 | 						idx = (j*imgd.width+i+k)*4;
1067 | 						racc += imgd.data[idx  ] * thisgk[k+radius];
1068 | 						gacc += imgd.data[idx+1] * thisgk[k+radius];
1069 | 						bacc += imgd.data[idx+2] * thisgk[k+radius];
1070 | 						aacc += imgd.data[idx+3] * thisgk[k+radius];
1071 | 						wacc += thisgk[k+radius];
1072 | 					}
1073 | 				}
1074 | 				// The new pixel
1075 | 				idx = (j*imgd.width+i)*4;
1076 | 				imgd2.data[idx  ] = Math.floor(racc / wacc);
1077 | 				imgd2.data[idx+1] = Math.floor(gacc / wacc);
1078 | 				imgd2.data[idx+2] = Math.floor(bacc / wacc);
1079 | 				imgd2.data[idx+3] = Math.floor(aacc / wacc);
1080 | 				
1081 | 			}// End of width loop
1082 | 		}// End of horizontal blur
1083 | 		
1084 | 		// copying the half blurred imgd2
1085 | 		var himgd = new Uint8ClampedArray(imgd2.data);
1086 | 		
1087 | 		// loop through all pixels, vertical blur
1088 | 		for( j=0; j < imgd.height; j++ ){
1089 | 			for( i=0; i < imgd.width; i++ ){
1090 | 
1091 | 				racc = 0; gacc = 0; bacc = 0; aacc = 0; wacc = 0;
1092 | 				// gauss kernel loop
1093 | 				for( k = -radius; k < radius+1; k++){
1094 | 					// add weighted color values
1095 | 					if( (j+k > 0) && (j+k < imgd.height) ){
1096 | 						idx = ((j+k)*imgd.width+i)*4;
1097 | 						racc += himgd[idx  ] * thisgk[k+radius];
1098 | 						gacc += himgd[idx+1] * thisgk[k+radius];
1099 | 						bacc += himgd[idx+2] * thisgk[k+radius];
1100 | 						aacc += himgd[idx+3] * thisgk[k+radius];
1101 | 						wacc += thisgk[k+radius];
1102 | 					}
1103 | 				}
1104 | 				// The new pixel
1105 | 				idx = (j*imgd.width+i)*4;
1106 | 				imgd2.data[idx  ] = Math.floor(racc / wacc);
1107 | 				imgd2.data[idx+1] = Math.floor(gacc / wacc);
1108 | 				imgd2.data[idx+2] = Math.floor(bacc / wacc);
1109 | 				imgd2.data[idx+3] = Math.floor(aacc / wacc);
1110 | 				
1111 | 			}// End of width loop
1112 | 		}// End of vertical blur
1113 | 		
1114 | 		// Selective blur: loop through all pixels
1115 | 		for( j=0; j < imgd.height; j++ ){
1116 | 			for( i=0; i < imgd.width; i++ ){
1117 | 				
1118 | 				idx = (j*imgd.width+i)*4;
1119 | 				// d is the difference between the blurred and the original pixel
1120 | 				d = Math.abs(imgd2.data[idx  ] - imgd.data[idx  ]) + Math.abs(imgd2.data[idx+1] - imgd.data[idx+1]) +
1121 | 					Math.abs(imgd2.data[idx+2] - imgd.data[idx+2]) + Math.abs(imgd2.data[idx+3] - imgd.data[idx+3]);
1122 | 				// selective blur: if d>delta, put the original pixel back
1123 | 				if(d>delta){
1124 | 					imgd2.data[idx  ] = imgd.data[idx  ];
1125 | 					imgd2.data[idx+1] = imgd.data[idx+1];
1126 | 					imgd2.data[idx+2] = imgd.data[idx+2];
1127 | 					imgd2.data[idx+3] = imgd.data[idx+3];
1128 | 				}
1129 | 			}
1130 | 		}// End of Selective blur
1131 | 		
1132 | 		return imgd2;
1133 | 		
1134 | 	},// End of blur()
1135 | 	
1136 | 	// Helper function: loading an image from a URL, then executing callback with canvas as argument
1137 | 	this.loadImage = function(url,callback,options){
1138 | 		var img = new Image();
1139 | 		if(options && options.corsenabled){ img.crossOrigin = 'Anonymous'; }
1140 | 		img.onload = function(){
1141 | 			var canvas = document.createElement('canvas');
1142 | 			canvas.width = img.width;
1143 | 			canvas.height = img.height;
1144 | 			var context = canvas.getContext('2d');
1145 | 			context.drawImage(img,0,0);
1146 | 			callback(canvas);
1147 | 		};
1148 | 		img.src = url;
1149 | 	},
1150 | 	
1151 | 	// Helper function: getting ImageData from a canvas
1152 | 	this.getImgdata = function(canvas){
1153 | 		var context = canvas.getContext('2d');
1154 | 		return context.getImageData(0,0,canvas.width,canvas.height);
1155 | 	},
1156 | 	
1157 | 	// Special palette to use with drawlayers()
1158 | 	this.specpalette = [
1159 | 		{r:0,g:0,b:0,a:255}, {r:128,g:128,b:128,a:255}, {r:0,g:0,b:128,a:255}, {r:64,g:64,b:128,a:255},
1160 | 		{r:192,g:192,b:192,a:255}, {r:255,g:255,b:255,a:255}, {r:128,g:128,b:192,a:255}, {r:0,g:0,b:192,a:255},
1161 | 		{r:128,g:0,b:0,a:255}, {r:128,g:64,b:64,a:255}, {r:128,g:0,b:128,a:255}, {r:168,g:168,b:168,a:255},
1162 | 		{r:192,g:128,b:128,a:255}, {r:192,g:0,b:0,a:255}, {r:255,g:255,b:255,a:255}, {r:0,g:128,b:0,a:255}
1163 | 	],
1164 | 	
1165 | 	// Helper function: Drawing all edge node layers into a container
1166 | 	this.drawLayers = function(layers,palette,scale,parentid){
1167 | 		scale = scale||1;
1168 | 		var w,h,i,j,k;
1169 | 		
1170 | 		// Preparing container
1171 | 		var div;
1172 | 		if(parentid){
1173 | 			div = document.getElementById(parentid);
1174 | 			if(!div){
1175 | 				div = document.createElement('div');
1176 | 				div.id = parentid;
1177 | 				document.body.appendChild(div);
1178 | 			}
1179 | 		}else{
1180 | 			div = document.createElement('div');
1181 | 			document.body.appendChild(div);
1182 | 		}
1183 | 		
1184 | 		// Layers loop
1185 | 		for (k in layers) {
1186 | 			if(!layers.hasOwnProperty(k)){ continue; }
1187 | 			
1188 | 			// width, height
1189 | 			w=layers[k][0].length; h=layers[k].length;
1190 | 			
1191 | 			// Creating new canvas for every layer
1192 | 			var canvas = document.createElement('canvas'); canvas.width=w*scale; canvas.height=h*scale;
1193 | 			var context = canvas.getContext('2d');
1194 | 			
1195 | 			// Drawing
1196 | 			for(j=0; j<h; j++){
1197 | 				for(i=0; i<w; i++){
1198 | 					context.fillStyle = _this.torgbastr(palette[ layers[k][j][i]%palette.length ]);
1199 | 					context.fillRect(i*scale,j*scale,scale,scale);
1200 | 				}
1201 | 			}
1202 | 			
1203 | 			// Appending canvas to container
1204 | 			div.appendChild(canvas);
1205 | 		}// End of Layers loop
1206 | 	}// End of drawlayers
1207 | 	
1208 | 	;// End of function list
1209 | 	
1210 | }// End of ImageTracer object
1211 | 
1212 | // export as AMD module / Node module / browser or worker variable
1213 | if(typeof define === 'function' && define.amd){
1214 | 	define(function() { return new ImageTracer(); });
1215 | }else if(typeof module !== 'undefined'){
1216 | 	module.exports = new ImageTracer();
1217 | }else if(typeof self !== 'undefined'){
1218 | 	self.ImageTracer = new ImageTracer();
1219 | }else window.ImageTracer = new ImageTracer();
1220 | 
1221 | })();


--------------------------------------------------------------------------------
/nodecli/PNG.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var PNG = function(){
  4 | 
  5 | 	// initialize all members to keep the same hidden class
  6 | 	this.width = 0;
  7 | 	this.height = 0;
  8 | 	this.bitDepth = 0;
  9 | 	this.colorType = 0;
 10 | 	this.compressionMethod = 0;
 11 | 	this.filterMethod = 0;
 12 | 	this.interlaceMethod = 0;
 13 | 
 14 | 	this.colors = 0;
 15 | 	this.alpha = false;
 16 | 	this.pixelBits = 0;
 17 | 
 18 | 	this.palette = null;
 19 | 	this.pixels = null;
 20 | 
 21 | };
 22 | 
 23 | PNG.prototype.getWidth = function(){
 24 | 	return this.width;
 25 | };
 26 | 
 27 | PNG.prototype.setWidth = function(width){
 28 | 	this.width = width;
 29 | };
 30 | 
 31 | PNG.prototype.getHeight = function(){
 32 | 	return this.height;
 33 | };
 34 | 
 35 | PNG.prototype.setHeight = function(height){
 36 | 	this.height = height;
 37 | };
 38 | 
 39 | PNG.prototype.getBitDepth = function(){
 40 | 	return this.bitDepth;
 41 | };
 42 | 
 43 | PNG.prototype.setBitDepth = function(bitDepth){
 44 | 	if ([2, 4, 8, 16].indexOf(bitDepth) === -1){
 45 | 		throw new Error("invalid bith depth " + bitDepth);
 46 | 	}
 47 | 	this.bitDepth = bitDepth;
 48 | };
 49 | 
 50 | PNG.prototype.getColorType = function(){
 51 | 	return this.colorType;
 52 | };
 53 | 
 54 | PNG.prototype.setColorType = function(colorType){
 55 | 
 56 | 	//   Color    Allowed    Interpretation
 57 | 	//   Type    Bit Depths
 58 | 	//
 59 | 	//   0       1,2,4,8,16  Each pixel is a grayscale sample.
 60 | 	//
 61 | 	//   2       8,16        Each pixel is an R,G,B triple.
 62 | 	//
 63 | 	//   3       1,2,4,8     Each pixel is a palette index;
 64 | 	//                       a PLTE chunk must appear.
 65 | 	//
 66 | 	//   4       8,16        Each pixel is a grayscale sample,
 67 | 	//                       followed by an alpha sample.
 68 | 	//
 69 | 	//   6       8,16        Each pixel is an R,G,B triple,
 70 | 	//                       followed by an alpha sample.
 71 | 
 72 | 	var colors = 0, alpha = false;
 73 | 
 74 | 	switch (colorType){
 75 | 		case 0: colors = 1; break;
 76 | 		case 2: colors = 3; break;
 77 | 		case 3: colors = 1; break;
 78 | 		case 4: colors = 2; alpha = true; break;
 79 | 		case 6: colors = 4; alpha = true; break;
 80 | 		default: throw new Error("invalid color type");
 81 | 	}
 82 | 
 83 | 	this.colors = colors;
 84 | 	this.alpha = alpha;
 85 | 	this.colorType = colorType;
 86 | };
 87 | 
 88 | PNG.prototype.getCompressionMethod = function(){
 89 | 	return this.compressionMethod;
 90 | };
 91 | 
 92 | PNG.prototype.setCompressionMethod = function(compressionMethod){
 93 | 	if (compressionMethod !== 0){
 94 | 		throw new Error("invalid compression method " + compressionMethod);
 95 | 	}
 96 | 	this.compressionMethod = compressionMethod;
 97 | };
 98 | 
 99 | PNG.prototype.getFilterMethod = function(){
100 | 	return this.filterMethod;
101 | };
102 | 
103 | PNG.prototype.setFilterMethod = function(filterMethod){
104 | 	if (filterMethod !== 0){
105 | 		throw new Error("invalid filter method " + filterMethod);
106 | 	}
107 | 	this.filterMethod = filterMethod;
108 | };
109 | 
110 | PNG.prototype.getInterlaceMethod = function(){
111 | 	return this.interlaceMethod;
112 | };
113 | 
114 | PNG.prototype.setInterlaceMethod = function(interlaceMethod){
115 | 	if (interlaceMethod !== 0 && interlaceMethod !== 1){
116 | 		throw new Error("invalid interlace method " + interlaceMethod);
117 | 	}
118 | 	this.interlaceMethod = interlaceMethod;
119 | };
120 | 
121 | PNG.prototype.setPalette = function(palette){
122 | 	if (palette.length % 3 !== 0){
123 | 		throw new Error("incorrect PLTE chunk length");
124 | 	}
125 | 	if (palette.length > (Math.pow(2, this.bitDepth) * 3)){
126 | 		throw new Error("palette has more colors than 2^bitdepth");
127 | 	}
128 | 	this.palette = palette;
129 | };
130 | 
131 | PNG.prototype.getPalette = function(){
132 | 	return this.palette;
133 | };
134 | 
135 | /**
136 |  * get the pixel color on a certain location in a normalized way
137 |  * result is an array: [red, green, blue, alpha]
138 |  */
139 | PNG.prototype.getPixel = function(x, y){
140 | 	if (!this.pixels) throw new Error("pixel data is empty");
141 | 	if (x >= this.width || y >= this.height){
142 | 		throw new Error("x,y position out of bound");
143 | 	}
144 | 	var i = this.colors * this.bitDepth / 8 * (y * this.width + x);
145 | 	var pixels = this.pixels;
146 | 
147 | 	switch (this.colorType){
148 | 		case 0: return [pixels[i], pixels[i], pixels[i], 255];
149 | 		case 2: return [pixels[i], pixels[i + 1], pixels[i + 2], 255];
150 | 		case 3: return [
151 | 			this.palette[pixels[i] * 3 + 0],
152 | 			this.palette[pixels[i] * 3 + 1],
153 | 			this.palette[pixels[i] * 3 + 2],
154 | 			255];
155 | 		case 4: return [pixels[i], pixels[i], pixels[i], pixels[i + 1]];
156 | 		case 6: return [pixels[i], pixels[i + 1], pixels[i + 2], pixels[i + 3]];
157 | 	}
158 | };
159 | 
160 | module.exports = PNG;
161 | 


--------------------------------------------------------------------------------
/nodecli/PNGReader.js:
--------------------------------------------------------------------------------
  1 | /*global Uint8Array:true ArrayBuffer:true */
  2 | "use strict";
  3 | 
  4 | var zlib = require('zlib');
  5 | var PNG = require('./PNG');
  6 | 
  7 | var inflate = function(data, callback){
  8 | 	return zlib.inflate(new Buffer(data), callback);
  9 | };
 10 | 
 11 | var slice = Array.prototype.slice;
 12 | var toString = Object.prototype.toString;
 13 | 
 14 | function equalBytes(a, b){
 15 | 	if (a.length != b.length) return false;
 16 | 	for (var l = a.length; l--;) if (a[l] != b[l]) return false;
 17 | 	return true;
 18 | }
 19 | 
 20 | function readUInt32(buffer, offset){
 21 | 	return (buffer[offset] << 24) +
 22 | 		(buffer[offset + 1] << 16) +
 23 | 		(buffer[offset + 2] << 8) +
 24 | 		(buffer[offset + 3] << 0);
 25 | }
 26 | 
 27 | function readUInt16(buffer, offset){
 28 | 	return (buffer[offset + 1] << 8) + (buffer[offset] << 0);
 29 | }
 30 | 
 31 | function readUInt8(buffer, offset){
 32 | 	return buffer[offset] << 0;
 33 | }
 34 | 
 35 | function bufferToString(buffer){
 36 | 	var str = '';
 37 | 	for (var i = 0; i < buffer.length; i++){
 38 | 		str += String.fromCharCode(buffer[i]);
 39 | 	}
 40 | 	return str;
 41 | }
 42 | 
 43 | var PNGReader = function(bytes){
 44 | 
 45 | 	if (typeof bytes == 'string'){
 46 | 		var bts = bytes;
 47 | 		bytes = new Array(bts.length);
 48 | 		for (var i = 0, l = bts.length; i < l; i++){
 49 | 			bytes[i] = bts[i].charCodeAt(0);
 50 | 		}
 51 | 	} else {
 52 | 		var type = toString.call(bytes).slice(8, -1);
 53 | 		if (type == 'ArrayBuffer') bytes = new Uint8Array(bytes);
 54 | 	}
 55 | 
 56 | 	// current pointer
 57 | 	this.i = 0;
 58 | 	// bytes buffer
 59 | 	this.bytes = bytes;
 60 | 	// Output object
 61 | 	this.png = new PNG();
 62 | 
 63 | 	this.dataChunks = [];
 64 | 
 65 | };
 66 | 
 67 | PNGReader.prototype.readBytes = function(length){
 68 | 	var end = this.i + length;
 69 | 	if (end > this.bytes.length){
 70 | 		throw new Error('Unexpectedly reached end of file');
 71 | 	}
 72 | 	var bytes = slice.call(this.bytes, this.i, end);
 73 | 	this.i = end;
 74 | 	return bytes;
 75 | };
 76 | 
 77 | /**
 78 |  * http://www.w3.org/TR/2003/REC-PNG-20031110/#5PNG-file-signature
 79 |  */
 80 | PNGReader.prototype.decodeHeader = function(){
 81 | 
 82 | 	if (this.i !== 0){
 83 | 		throw new Error('file pointer should be at 0 to read the header');
 84 | 	}
 85 | 
 86 | 	var header = this.readBytes(8);
 87 | 
 88 | 	if (!equalBytes(header, [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A])){
 89 | 		throw new Error('invalid PNGReader file (bad signature)');
 90 | 	}
 91 | 
 92 | 	this.header = header;
 93 | 
 94 | };
 95 | 
 96 | /**
 97 |  * http://www.w3.org/TR/2003/REC-PNG-20031110/#5Chunk-layout
 98 |  *
 99 |  * length =  4      bytes
100 |  * type   =  4      bytes (IHDR, PLTE, IDAT, IEND or others)
101 |  * chunk  =  length bytes
102 |  * crc    =  4      bytes
103 |  */
104 | PNGReader.prototype.decodeChunk = function(){
105 | 
106 | 	var length = readUInt32(this.readBytes(4), 0);
107 | 
108 | 	if (length < 0){
109 | 		throw new Error('Bad chunk length ' + (0xFFFFFFFF & length));
110 | 	}
111 | 
112 | 	var type = bufferToString(this.readBytes(4));
113 | 	var chunk = this.readBytes(length);
114 | 	var crc = this.readBytes(4);
115 | 
116 | 	switch (type){
117 | 		case 'IHDR': this.decodeIHDR(chunk); break;
118 | 		case 'PLTE': this.decodePLTE(chunk); break;
119 | 		case 'IDAT': this.decodeIDAT(chunk); break;
120 | 		case 'IEND': this.decodeIEND(chunk); break;
121 | 	}
122 | 
123 | 	return type;
124 | 
125 | };
126 | 
127 | /**
128 |  * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IHDR
129 |  * http://www.libpng.org/pub/png/spec/1.2/png-1.2-pdg.html#C.IHDR
130 |  *
131 |  * Width               4 bytes
132 |  * Height              4 bytes
133 |  * Bit depth           1 byte
134 |  * Colour type         1 byte
135 |  * Compression method  1 byte
136 |  * Filter method       1 byte
137 |  * Interlace method    1 byte
138 |  */
139 | PNGReader.prototype.decodeIHDR = function(chunk){
140 | 	var png = this.png;
141 | 
142 | 	png.setWidth(             readUInt32(chunk, 0));
143 | 	png.setHeight(            readUInt32(chunk, 4));
144 | 	png.setBitDepth(          readUInt8(chunk,  8));
145 | 	png.setColorType(         readUInt8(chunk,  9));
146 | 	png.setCompressionMethod( readUInt8(chunk, 10));
147 | 	png.setFilterMethod(      readUInt8(chunk, 11));
148 | 	png.setInterlaceMethod(   readUInt8(chunk, 12));
149 | 
150 | };
151 | 
152 | /**
153 |  *
154 |  * http://www.w3.org/TR/PNG/#11PLTE
155 |  */
156 | PNGReader.prototype.decodePLTE = function(chunk){
157 | 	this.png.setPalette(chunk);
158 | };
159 | 
160 | /**
161 |  * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IDAT
162 |  */
163 | PNGReader.prototype.decodeIDAT = function(chunk){
164 | 	// multiple IDAT chunks will concatenated
165 | 	this.dataChunks.push(chunk);
166 | };
167 | 
168 | /**
169 |  * http://www.w3.org/TR/2003/REC-PNG-20031110/#11IEND
170 |  */
171 | PNGReader.prototype.decodeIEND = function(){
172 | };
173 | 
174 | /**
175 |  * Uncompress IDAT chunks
176 |  */
177 | PNGReader.prototype.decodePixels = function(callback){
178 | 	var png = this.png;
179 | 	var reader = this;
180 | 	var length = 0;
181 | 	var i, j, k, l;
182 | 	for (l = this.dataChunks.length; l--;) length += this.dataChunks[l].length;
183 | 	var data = new Buffer(length);
184 | 	for (i = 0, k = 0, l = this.dataChunks.length; i < l; i++){
185 | 		var chunk = this.dataChunks[i];
186 | 		for (j = 0; j < chunk.length; j++) data[k++] = chunk[j];
187 | 	}
188 | 	inflate(data, function(err, data){
189 | 		if (err) return callback(err);
190 | 
191 | 		try {
192 | 			if (png.getInterlaceMethod() === 0){
193 | 				reader.interlaceNone(data);
194 | 			} else {
195 | 				reader.interlaceAdam7(data);
196 | 			}
197 | 		} catch (e){
198 | 			return callback(e);
199 | 		}
200 | 
201 | 		callback();
202 | 	});
203 | };
204 | 
205 | // Different interlace methods
206 | 
207 | PNGReader.prototype.interlaceNone = function(data){
208 | 
209 | 	var png = this.png;
210 | 
211 | 	// bytes per pixel
212 | 	var bpp = Math.max(1, png.colors * png.bitDepth / 8);
213 | 
214 | 	// color bytes per row
215 | 	var cpr = bpp * png.width;
216 | 
217 | 	var pixels = new Buffer(bpp * png.width * png.height);
218 | 	var scanline;
219 | 	var offset = 0;
220 | 
221 | 	for (var i = 0; i < data.length; i += cpr + 1){
222 | 
223 | 		scanline = slice.call(data, i + 1, i + cpr + 1);
224 | 
225 | 		switch (readUInt8(data, i)){
226 | 			case 0: this.unFilterNone(   scanline, pixels, bpp, offset, cpr); break;
227 | 			case 1: this.unFilterSub(    scanline, pixels, bpp, offset, cpr); break;
228 | 			case 2: this.unFilterUp(     scanline, pixels, bpp, offset, cpr); break;
229 | 			case 3: this.unFilterAverage(scanline, pixels, bpp, offset, cpr); break;
230 | 			case 4: this.unFilterPaeth(  scanline, pixels, bpp, offset, cpr); break;
231 | 			default: throw new Error("unkown filtered scanline");
232 | 		}
233 | 
234 | 		offset += cpr;
235 | 
236 | 	}
237 | 
238 | 	png.pixels = pixels;
239 | 
240 | };
241 | 
242 | PNGReader.prototype.interlaceAdam7 = function(data){
243 | 	throw new Error("Adam7 interlacing is not implemented yet");
244 | };
245 | 
246 | // Unfiltering
247 | 
248 | /**
249 |  * No filtering, direct copy
250 |  */
251 | PNGReader.prototype.unFilterNone = function(scanline, pixels, bpp, of, length){
252 | 	for (var i = 0, to = length; i < to; i++){
253 | 		pixels[of + i] = scanline[i];
254 | 	}
255 | };
256 | 
257 | /**
258 |  * The Sub() filter transmits the difference between each byte and the value
259 |  * of the corresponding byte of the prior pixel.
260 |  * Sub(x) = Raw(x) + Raw(x - bpp)
261 |  */
262 | PNGReader.prototype.unFilterSub = function(scanline, pixels, bpp, of, length){
263 | 	var i = 0;
264 | 	for (; i < bpp; i++) pixels[of + i] = scanline[i];
265 | 	for (; i < length; i++){
266 | 		// Raw(x) + Raw(x - bpp)
267 | 		pixels[of + i] = (scanline[i] + pixels[of + i - bpp]) & 0xFF;
268 | 	}
269 | };
270 | 
271 | /**
272 |  * The Up() filter is just like the Sub() filter except that the pixel
273 |  * immediately above the current pixel, rather than just to its left, is used
274 |  * as the predictor.
275 |  * Up(x) = Raw(x) + Prior(x)
276 |  */
277 | PNGReader.prototype.unFilterUp = function(scanline, pixels, bpp, of, length){
278 | 	var i = 0, byte, prev;
279 | 	// Prior(x) is 0 for all x on the first scanline
280 | 	if ((of - length) < 0) for (; i < length; i++){
281 | 		pixels[of + i] = scanline[i];
282 | 	} else for (; i < length; i++){
283 | 		// Raw(x)
284 | 		byte = scanline[i];
285 | 		// Prior(x)
286 | 		prev = pixels[of + i - length];
287 | 		pixels[of + i] = (byte + prev) & 0xFF;
288 | 	}
289 | };
290 | 
291 | /**
292 |  * The Average() filter uses the average of the two neighboring pixels (left
293 |  * and above) to predict the value of a pixel.
294 |  * Average(x) = Raw(x) + floor((Raw(x-bpp)+Prior(x))/2)
295 |  */
296 | PNGReader.prototype.unFilterAverage = function(scanline, pixels, bpp, of, length){
297 | 	var i = 0, byte, prev, prior;
298 | 	if ((of - length) < 0){
299 | 		// Prior(x) == 0 && Raw(x - bpp) == 0
300 | 		for (; i < bpp; i++){
301 | 			pixels[of + i] = scanline[i];
302 | 		}
303 | 		// Prior(x) == 0 && Raw(x - bpp) != 0 (right shift, prevent doubles)
304 | 		for (; i < length; i++){
305 | 			pixels[of + i] = (scanline[i] + (pixels[of + i - bpp] >> 1)) & 0xFF;
306 | 		}
307 | 	} else {
308 | 		// Prior(x) != 0 && Raw(x - bpp) == 0
309 | 		for (; i < bpp; i++){
310 | 			pixels[of + i] = (scanline[i] + (pixels[of - length + i] >> 1)) & 0xFF;
311 | 		}
312 | 		// Prior(x) != 0 && Raw(x - bpp) != 0
313 | 		for (; i < length; i++){
314 | 			byte = scanline[i];
315 | 			prev = pixels[of + i - bpp];
316 | 			prior = pixels[of + i - length];
317 | 			pixels[of + i] = (byte + (prev + prior >> 1)) & 0xFF;
318 | 		}
319 | 	}
320 | };
321 | 
322 | /**
323 |  * The Paeth() filter computes a simple linear function of the three
324 |  * neighboring pixels (left, above, upper left), then chooses as predictor
325 |  * the neighboring pixel closest to the computed value. This technique is due
326 |  * to Alan W. Paeth.
327 |  * Paeth(x) = Raw(x) +
328 |  *            PaethPredictor(Raw(x-bpp), Prior(x), Prior(x-bpp))
329 |  *  function PaethPredictor (a, b, c)
330 |  *  begin
331 |  *       ; a = left, b = above, c = upper left
332 |  *       p := a + b - c        ; initial estimate
333 |  *       pa := abs(p - a)      ; distances to a, b, c
334 |  *       pb := abs(p - b)
335 |  *       pc := abs(p - c)
336 |  *       ; return nearest of a,b,c,
337 |  *       ; breaking ties in order a,b,c.
338 |  *       if pa <= pb AND pa <= pc then return a
339 |  *       else if pb <= pc then return b
340 |  *       else return c
341 |  *  end
342 |  */
343 | PNGReader.prototype.unFilterPaeth = function(scanline, pixels, bpp, of, length){
344 | 	var i = 0, raw, a, b, c, p, pa, pb, pc, pr;
345 | 	if ((of - length) < 0){
346 | 		// Prior(x) == 0 && Raw(x - bpp) == 0
347 | 		for (; i < bpp; i++){
348 | 			pixels[of + i] = scanline[i];
349 | 		}
350 | 		// Prior(x) == 0 && Raw(x - bpp) != 0
351 | 		// paethPredictor(x, 0, 0) is always x
352 | 		for (; i < length; i++){
353 | 			pixels[of + i] = (scanline[i] + pixels[of + i - bpp]) & 0xFF;
354 | 		}
355 | 	} else {
356 | 		// Prior(x) != 0 && Raw(x - bpp) == 0
357 | 		// paethPredictor(x, 0, 0) is always x
358 | 		for (; i < bpp; i++){
359 | 			pixels[of + i] = (scanline[i] + pixels[of + i - length]) & 0xFF;
360 | 		}
361 | 		// Prior(x) != 0 && Raw(x - bpp) != 0
362 | 		for (; i < length; i++){
363 | 			raw = scanline[i];
364 | 			a = pixels[of + i - bpp];
365 | 			b = pixels[of + i - length];
366 | 			c = pixels[of + i - length - bpp];
367 | 			p = a + b - c;
368 | 			pa = Math.abs(p - a);
369 | 			pb = Math.abs(p - b);
370 | 			pc = Math.abs(p - c);
371 | 			if (pa <= pb && pa <= pc) pr = a;
372 | 			else if (pb <= pc) pr = b;
373 | 			else pr = c;
374 | 			pixels[of + i] = (raw + pr) & 0xFF;
375 | 		}
376 | 	}
377 | };
378 | 
379 | /**
380 |  * Parse the PNG file
381 |  *
382 |  * reader.parse(options, callback)
383 |  * OR
384 |  * reader.parse(callback)
385 |  *
386 |  * OPTIONS:
387 |  *    option  | type     | default
388 |  *    ----------------------------
389 |  *    data      boolean    true    should it read the pixel data
390 |  */
391 | PNGReader.prototype.parse = function(options, callback){
392 | 
393 | 	if (typeof options == 'function') callback = options;
394 | 	if (typeof options != 'object') options = {};
395 | 
396 | 	try {
397 | 
398 | 		this.decodeHeader();
399 | 
400 | 		while (this.i < this.bytes.length){
401 | 			var type = this.decodeChunk();
402 | 			// stop after IHDR chunk, or after IEND
403 | 			if (type == 'IHDR' && options.data === false || type == 'IEND') break;
404 | 		}
405 | 
406 | 		var png = this.png;
407 | 
408 | 		this.decodePixels(function(err){
409 | 			callback(err, png);
410 | 		});
411 | 
412 | 	} catch (e){
413 | 		callback(e);
414 | 	}
415 | 
416 | };
417 | 
418 | module.exports = PNGReader;
419 | 


--------------------------------------------------------------------------------
/nodecli/READTHIS.md:
--------------------------------------------------------------------------------
 1 | Run like this:
 2 | 
 3 | >node nodecli ../panda.png -outfilename outpanda.svg numberofcolors 4 -pathomit 16 ltres 0.1
 4 | 
 5 | Expected result:
 6 | 
 7 | .../outpanda.svg was saved!
 8 | 
 9 | 
10 | Please note:
11 |  - You can use option names with or without -    e.g.  ltres 0.1  or  -ltres 0.1
12 |  - Any option can be defined in any order or left out to get the defaults
13 |  - option values are cast to required types e.g. with parseFloat, but no error checking here
14 |  - options.pal and option presets are not supported right now
15 | 
16 | 
17 | PNG.js and PNGReader.js are saved on 2016-03-04 from
18 | 
19 | https://github.com/arian/pngjs
20 | 
21 | They have MIT license: https://github.com/arian/pngjs/blob/master/LICENSE.md
22 | 


--------------------------------------------------------------------------------
/nodecli/nodecli.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var fs = require('fs');
 4 | 
 5 | var ImageTracer = require( __dirname + '/../imagetracer_v1.2.6' );
 6 | 
 7 | // This example uses https://github.com/arian/pngjs
 8 | // , but other libraries can be used to load an image file to an ImageData object.
 9 | var PNGReader = require( __dirname + '/PNGReader' );
10 | 
11 | // CLI arguments to options
12 | var infilename = process.argv[2], outfilename = infilename+'.svg', options = {}, thisargname = '';
13 | if(process.argv.length>3){
14 | 
15 | 	for(var i=3; i<process.argv.length; i+=2 ){
16 | 
17 | 		thisargname = process.argv[i].toLowerCase();
18 | 
19 | 		// Output file name
20 | 		if(thisargname === 'outfilename' || thisargname === '-outfilename'){ outfilename = process.argv[i+1]; }
21 | 
22 | 		// Tracing
23 | 		if(thisargname === 'corsenabled' || thisargname === '-corsenabled'){ options.corsenabled = (process.argv[i+1].toLowerCase() === 'true'); }
24 | 		if(thisargname === 'ltres' || thisargname === '-ltres'){ options.ltres = parseFloat(process.argv[i+1]); }
25 | 		if(thisargname === 'qtres' || thisargname === '-qtres'){ options.qtres = parseFloat(process.argv[i+1]); }
26 | 		if(thisargname === 'pathomit' || thisargname === '-pathomit'){ options.pathomit = parseInt(process.argv[i+1]); }
27 | 		if(thisargname === 'rightangleenhance' || thisargname === '-rightangleenhance'){ options.rightangleenhance = (process.argv[i+1].toLowerCase() === 'true'); }
28 | 
29 | 		// Color quantization
30 | 		if(thisargname === 'colorsampling' || thisargname === '-colorsampling'){ options.colorsampling = parseInt(process.argv[i+1]); }
31 | 		if(thisargname === 'numberofcolors' || thisargname === '-numberofcolors'){ options.numberofcolors = parseInt(process.argv[i+1]); }
32 | 		if(thisargname === 'mincolorratio' || thisargname === '-mincolorratio'){ options.mincolorratio = parseFloat(process.argv[i+1]); }
33 | 		if(thisargname === 'colorquantcycles' || thisargname === '-colorquantcycles'){ options.colorquantcycles = parseInt(process.argv[i+1]); }
34 | 
35 | 		// Layering method
36 | 		if(thisargname === 'layering' || thisargname === '-layering'){ options.layering = process.argv[i+1]; }
37 | 
38 | 		// SVG rendering
39 | 		if(thisargname === 'strokewidth' || thisargname === '-strokewidth'){ options.strokewidth = parseFloat(process.argv[i+1]); }
40 | 		if(thisargname === 'linefilter' || thisargname === '-linefilter'){ options.linefilter = (process.argv[i+1].toLowerCase() === 'true'); }
41 | 		if(thisargname === 'scale' || thisargname === '-scale'){ options.scale = parseFloat(process.argv[i+1]); }
42 | 		if(thisargname === 'roundcoords' || thisargname === '-roundcoords'){ options.roundcoords = parseInt(process.argv[i+1]); }
43 | 		if(thisargname === 'viewbox' || thisargname === '-viewbox'){ options.viewbox = (process.argv[i+1].toLowerCase() === 'true'); }
44 | 		if(thisargname === 'desc' || thisargname === '-desc'){ options.desc = (process.argv[i+1].toLowerCase() === 'true'); }
45 | 		if(thisargname === 'lcpr' || thisargname === '-lcpr'){ options.lcpr = parseFloat(process.argv[i+1]); }
46 | 		if(thisargname === 'qcpr' || thisargname === '-qcpr'){ options.qcpr = parseFloat(process.argv[i+1]); }
47 | 
48 | 		// Blur
49 | 		if(thisargname === 'blurradius' || thisargname === '-blurradius'){ options.blurradius = parseInt(process.argv[i+1]); }
50 | 		if(thisargname === 'blurdelta' || thisargname === '-blurdelta'){ options.blurdelta = parseInt(process.argv[i+1]); }
51 | 
52 | 		// preset
53 | 		if(thisargname === 'preset' || thisargname === '-preset'){ options = process.argv[i+1]; }
54 | 	}// End of argv loop
55 | 
56 | }// End of command line argument list length check
57 | 
58 | fs.readFile(
59 | 		
60 | 	infilename, // Input file path
61 | 	
62 | 	function( err, bytes ){
63 | 		if(err){ console.log(err); throw err; }
64 | 
65 | 		var reader = new PNGReader(bytes);
66 | 
67 | 		reader.parse( function( err, png ){
68 | 			if(err){ console.log(err); throw err; }
69 | 
70 | 			// creating an ImageData object
71 | 			var myImageData = { width:png.width, height:png.height, data:png.pixels };
72 | 
73 | 			// tracing to SVG string
74 | 			var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
75 | 
76 | 			// writing to file
77 | 			fs.writeFile(
78 | 				outfilename, // Output file path
79 | 				svgstring,
80 | 				function(err){ if(err){ console.log(err); throw err; } console.log( outfilename+' was saved!' ); }
81 | 			);
82 | 
83 | 		});// End of reader.parse()
84 | 
85 | 	}// End of readFile callback()
86 | 
87 | );// End of fs.readFile()
88 | 


--------------------------------------------------------------------------------
/options.md:
--------------------------------------------------------------------------------
  1 | ## Options
  2 | 
  3 | Using a custom options object:
  4 | ```javascript
  5 | var options = { ltres:2, qtres:1, pathomit:8 }; // Any option can be omitted which will be set to the default
  6 | 
  7 | // Adding custom palette. This will override numberofcolors.
  8 | options.pal = [{r:0,g:0,b:0,a:255}, {r:0,g:0,b:255,a:255}, {r:255,g:255,b:0,a:255}];
  9 | 
 10 | // Using these options and appending the SVG to an element with id="svgcontainer"
 11 | ImageTracer.imageToSVG(
 12 | 	'panda.png', /* input filename / URL */
 13 | 	
 14 | 	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); }, /* callback function on SVG string result */
 15 | 	
 16 | 	options /* custom options object */
 17 | );
 18 | ```
 19 | 
 20 | #### Tracing
 21 | 
 22 | |Option name|Default value|Meaning|
 23 | |-----------|-------------|-------|
 24 | |```corsenabled```|```false```|Enable or disable [CORS Image loading](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)|
 25 | |```ltres```|```1```|Error threshold for straight lines.|
 26 | |```qtres```|```1```|Error threshold for quadratic splines.|
 27 | |```pathomit```|```8```|Edge node paths shorter than this will be discarded for noise reduction.|
 28 | |```rightangleenhance```|```true```|Enhance right angle corners.|
 29 | 
 30 | #### Color quantization
 31 | 
 32 | |Option name|Default value|Meaning|
 33 | |-----------|-------------|-------|
 34 | |```colorsampling```|```2```|0: disabled, generating a palette; 1: random sampling; 2: deterministic sampling|
 35 | |```numberofcolors```|```16```|Number of colors to use on palette if pal object is not defined.|
 36 | |```mincolorratio```|```0```|Color quantization will randomize a color if fewer pixels than (total pixels*mincolorratio) has it.|
 37 | |```colorquantcycles```|```3```|Color quantization will be repeated this many times.|
 38 | 
 39 | #### Layering
 40 | 
 41 | |Option name|Default value|Meaning|
 42 | |-----------|-------------|-------|
 43 | |```layering```|```0```|0: sequential ; 1: parallel|
 44 | 
 45 | #### SVG rendering
 46 | 
 47 | |Option name|Default value|Meaning|
 48 | |-----------|-------------|-------|
 49 | |```strokewidth```|```1```|[SVG stroke-width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)|
 50 | |```linefilter```|```false```|Enable or disable line filter for noise reduction.|
 51 | |```scale```|```1```|Every coordinate will be multiplied with this, to scale the SVG.|
 52 | |```roundcoords```|```1```|Rounding coordinates to a given decimal place. 1 means rounded to 1 decimal place like 7.3 ; 3 means rounded to 3 places, like 7.356|
 53 | |```viewbox```|```false```|Enable or disable SVG viewBox.|
 54 | |```desc```|```false```|Enable or disable SVG descriptions.|
 55 | 
 56 | #### Blur preprocessing
 57 | 
 58 | |Option name|Default value|Meaning|
 59 | |-----------|-------------|-------|
 60 | |```blurradius```|```0```|Set this to 1..5 for selective Gaussian blur preprocessing.|
 61 | |```blurdelta```|```20```|RGBA delta threshold for selective Gaussian blur preprocessing.|
 62 | 
 63 | #### Debug
 64 | 
 65 | |Option name|Default value|Meaning|
 66 | |-----------|-------------|-------|
 67 | |```layercontainerid```|No default value|Edge node layers can be visualized if a container div's id is defined.|
 68 | |```lcpr```|```0```|Straight line control point radius, if this is greater than zero, small circles will be drawn in the SVG. Do not use this for big/complex images.|
 69 | |```qcpr```|```0```|Quadratic spline control point radius, if this is greater than zero, small circles and lines will be drawn in the SVG. Do not use this for big/complex images.|
 70 | 
 71 | #### Initial palette
 72 | 
 73 | |Option name|Default value|Meaning|
 74 | |-----------|-------------|-------|
 75 | |```pal```|No default value|Custom palette, an array of color objects: ```[ {r:0,g:0,b:0,a:255}, ... ]```|
 76 | 
 77 | ---
 78 | 
 79 | ## Option presets
 80 | 
 81 | ![Option presets gallery](docimages/option_presets.png)
 82 | 
 83 | ```javascript
 84 | 	this.optionpresets = {
 85 | 		'default': {
 86 | 			
 87 | 			// Tracing
 88 | 			corsenabled : false,
 89 | 			ltres : 1,
 90 | 			qtres : 1,
 91 | 			pathomit : 8,
 92 | 			rightangleenhance : true,
 93 | 			
 94 | 			// Color quantization
 95 | 			colorsampling : 2,
 96 | 			numberofcolors : 16,
 97 | 			mincolorratio : 0,
 98 | 			colorquantcycles : 3,
 99 | 			
100 | 			// Layering method
101 | 			layering : 0,
102 | 			
103 | 			// SVG rendering
104 | 			strokewidth : 1,
105 | 			linefilter : false,
106 | 			scale : 1,
107 | 			roundcoords : 1,
108 | 			viewbox : false,
109 | 			desc : false,
110 | 			lcpr : 0,
111 | 			qcpr : 0,
112 | 			
113 | 			// Blur
114 | 			blurradius : 0,
115 | 			blurdelta : 20
116 | 			
117 | 		},
118 | 		
119 | 		'posterized1': { colorsampling:0, numberofcolors:2 },
120 | 		
121 | 		'posterized2': { numberofcolors:4, blurradius:5 },
122 | 		
123 | 		'curvy': { ltres:0.01, linefilter:true, rightangleenhance:false },
124 | 		
125 | 		'sharp': { qtres:0.01, linefilter:false },
126 | 		
127 | 		'detailed': { pathomit:0, roundcoords:2, ltres:0.5, qtres:0.5, numberofcolors:64 },
128 | 		
129 | 		'smoothed': { blurradius:5, blurdelta: 64 },
130 | 		
131 | 		'grayscale': { colorsampling:0, colorquantcycles:1, numberofcolors:7 },
132 | 		
133 | 		'fixedpalette': { colorsampling:0, colorquantcycles:1, numberofcolors:27 },
134 | 		
135 | 		'randomsampling1': { colorsampling:1, numberofcolors:8 },
136 | 		
137 | 		'randomsampling2': { colorsampling:1, numberofcolors:64 },
138 | 		
139 | 		'artistic1': { colorsampling:0, colorquantcycles:1, pathomit:0, blurradius:5, blurdelta: 64, ltres:0.01, linefilter:true, numberofcolors:16, strokewidth:2 },
140 | 		
141 | 		'artistic2': { qtres:0.01, colorsampling:0, colorquantcycles:1, numberofcolors:4, strokewidth:0 },
142 | 		
143 | 		'artistic3': { qtres:10, ltres:10, numberofcolors:8 },
144 | 		
145 | 		'artistic4': { qtres:10, ltres:10, numberofcolors:64, blurradius:5, blurdelta: 256, strokewidth:2 },
146 | 		
147 | 		'posterized3': { ltres: 1, qtres: 1, pathomit: 20, rightangleenhance: true, colorsampling: 0, numberofcolors: 3,
148 | 			mincolorratio: 0, colorquantcycles: 3, blurradius: 3, blurdelta: 20, strokewidth: 0, linefilter: false,
149 | 			roundcoords: 1, pal: [ { r: 0, g: 0, b: 100, a: 255 }, { r: 255, g: 255, b: 255, a: 255 } ] }
150 | 			
151 | 	},// End of optionpresets
152 | ```
153 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "imagetracerjs",
 3 |   "version": "1.2.6",
 4 |   "description": "raster image tracer and vectorizer, bitmap to SVG converter",
 5 |   "main": "imagetracer_v1.2.6.js",
 6 |   "scripts": {
 7 |     "test": "node ./nodecli/nodecli.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/jankovicsandras/imagetracerjs.git"
12 |   },
13 |   "keywords": [
14 |     "image",
15 |     "tracer",
16 |     "tracing",
17 |     "vector",
18 |     "raster",
19 |     "vectorize",
20 |     "vectorizing",
21 |     "convert",
22 |     "conversion",
23 |     "converting",
24 |     "tracing",
25 |     "bitmap",
26 |     "svg",
27 |     "bmp",
28 |     "png",
29 |     "jpg",
30 |     "jpeg",
31 |     "gif"
32 |   ],
33 |   "author": "András Jankovics",
34 |   "license": "Unlicense",
35 |   "bugs": {
36 |     "url": "https://github.com/jankovicsandras/imagetracerjs/issues"
37 |   },
38 |   "homepage": "https://github.com/jankovicsandras/imagetracerjs#readme"
39 | }
40 | 


--------------------------------------------------------------------------------
/panda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/panda.png


--------------------------------------------------------------------------------
/process_overview.md:
--------------------------------------------------------------------------------
 1 | ### Process overview
 2 | #### 1. Color quantization
 3 | The **colorquantization** function creates an indexed image (https://en.wikipedia.org/wiki/Indexed_color) using a variant of the https://en.wikipedia.org/wiki/K-means_clustering or https://en.wikipedia.org/wiki/K-medians_clustering algorithm. 
 4 | 
 5 | ![alt Original image (20x scale)](docimages/s2.png)
 6 | 
 7 | #### 2. Layer separation and edge detection
 8 | The **layering** function creates arrays for every color, and calculates edge node types. These are at the center of every 4 pixels, shown here as dots. This, **pathscan** and **interpolation** are a reinvented variant of the https://en.wikipedia.org/wiki/Marching_squares algorithm. 
 9 | 
10 | ![alt layer 0: black](docimages/s3.png)
11 | ![alt layer 1: yellow](docimages/s4.png)
12 | ![alt edge node examples](docimages/s7.png)
13 | 
14 | #### 3. Pathscan
15 | The **pathscan** function finds chains of edge nodes, example: the cyan dots and lines.
16 | 
17 | ![alt an edge node path](docimages/s8.png)
18 | 
19 | #### 4. Interpolation
20 | The **internodes** function interpolates the coordinates of the edge node paths. Every line segment in the new path has one of the 8 directions (East, North East, N, NW, W, SW, S, SE).
21 | 
22 | ![alt interpolating](docimages/s9.png)
23 | ![alt interpolation result](docimages/s10.png)
24 | 
25 | #### 5. Tracing
26 | The **tracepath** function splits the interpolated paths into sequences with two directions.
27 | 
28 | ![alt a sequence](docimages/s11.png)
29 | 
30 | The **fitseq** function tries to fit a straight line on the start- and endpoint of the sequence (black line). If the distance error between the calculated points (black line) and actual sequence points (blue dots) is greater than the treshold, the point with the greatest error is selected (red line).
31 | 
32 | ![alt fitting a straight line](docimages/s12.png)
33 | 
34 | The **fitseq** function tries to fit a quadratic spline through the error point.
35 | 
36 | ![alt fitting a quadratic spline](docimages/s13.png)
37 | ![alt fitting line segments](docimages/s14.png) 
38 | ![alt result with control points](docimages/s15.png)
39 | 
40 | If the **fitseq** function can not fit a straight line or a quadratic spline to the sequence with the given error tresholds, then it will split the sequence in two and recursively call **fitseq** on each part (https://en.wikipedia.org/wiki/Divide_and_conquer_algorithm).
41 | 
42 | #### 6. SVG rendering
43 | The coordinates are rendered to [SVG Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) in the **getsvgstring** function.
44 | 
45 | ### Ideas for improvement
46 | 
47 | - Error handling: there's very little error handling now, Out of memory can happen easily with big images or many layers.
48 | - Color quantization: other algorithms e.g. https://en.wikipedia.org/wiki/Octree ?
49 | - Color quantization: colors with few pixels are randomized, but probably the most distant colors should be found instead.
50 | - Tracing: 5.1. finding more suitable sequences.
51 | - Tracing: 5.5. splitpoint = fitpoint ; this is just a guess, there might be a better splitpoint.
52 | - Tracing: 5.7. If splitpoint-endpoint is a spline, try to add new points from the next sequence; this is not implemented.
53 | - Tracing: cubic splines or other curves?
54 | - Default values: they are chosen because they seemed OK, not based on calculations.
55 | - Output: [PDF](https://en.wikipedia.org/wiki/Portable_Document_Format), [DXF](https://en.wikipedia.org/wiki/AutoCAD_DXF),   [G-code](https://en.wikipedia.org/wiki/G-code) or other output?
56 | - comparing and integrating ideas from https://en.wikipedia.org/wiki/Potrace
57 | - Pathomit with background hole path shrinking 
58 | - Centerline tracing, Issue #65 
59 | 


--------------------------------------------------------------------------------
/simplify_interop.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<script src="imagetracer_v1.2.6.js"></script>
  6 | 	<script src="simplify.js"></script>
  7 | 	<script>
  8 | 
  9 | 		function onload_init(){
 10 | 			
 11 | 			var options = { ltres:0.1, qtres:1, scale:4, strokewidth:4 };
 12 | 			
 13 | 			// This will load an image, trace it when loaded, and execute callback on the tracedata
 14 | 			ImageTracer.imageToTracedata(
 15 | 				'panda.png',
 16 | 				function(tracedata){
 17 | 				
 18 | 					// Counting total original points; copying and simplifying points in newpointscontainer 
 19 | 					var pointcnt = 0, newpointscontainer = [];
 20 | 					
 21 | 					// layers loop
 22 | 					for(var i=0; i<tracedata.layers.length; i++){
 23 | 					
 24 | 						newpointscontainer[i] = [];
 25 | 					
 26 | 						// paths loop
 27 | 						for(var j=0; j<tracedata.layers[i].length; j++){
 28 | 						
 29 | 							newpointscontainer[i][j] = [];
 30 | 							
 31 | 							// register first point
 32 | 							newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[0].x1, y: tracedata.layers[i][j].segments[0].y1 });
 33 | 						
 34 | 							// segments loop
 35 | 							for(var k=0; k<tracedata.layers[i][j].segments.length; k++){
 36 | 							
 37 | 								// register next point
 38 | 								newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[k].x2, y: tracedata.layers[i][j].segments[k].y2 });
 39 | 								pointcnt++;
 40 | 								
 41 | 								if(tracedata.layers[i][j].segments[k].hasOwnProperty('x3')){
 42 | 
 43 | 									// register next point
 44 | 									newpointscontainer[i][j].push({x: tracedata.layers[i][j].segments[k].x3, y: tracedata.layers[i][j].segments[k].y3 });
 45 | 									pointcnt++;
 46 | 									
 47 | 								}// End of x3 check
 48 | 								
 49 | 							}// End of segments loop
 50 | 							
 51 | 							// simplify with tolerance = 2 ; highQuality = true
 52 | 							newpointscontainer[i][j] = simplify(newpointscontainer[i][j], 2, true);
 53 | 	
 54 | 						}// End of paths loop
 55 | 						
 56 | 					}// End of layers loop
 57 | 					
 58 | 					// log original SVG stats
 59 | 					document.getElementById('log').innerHTML += 'Original point count: '+pointcnt+'<br/>';
 60 | 					
 61 | 					// display original SVG
 62 | 					ImageTracer.appendSVGString( ImageTracer.getsvgstring(tracedata,options), 'svgcontainer' );
 63 | 					
 64 | 					// Copying the new, simplified points back to tracedata
 65 | 					// As we don't know how and which segment is affected, 
 66 | 					// whether quadratic spline controlpoints or endpoints were deleted,
 67 | 					// we will just assume everything is linear, no quadratic splines will be used
 68 | 					
 69 | 					pointcnt = 0;
 70 | 					
 71 | 					// layers loop
 72 | 					for(var i=0; i<tracedata.layers.length; i++){
 73 | 					
 74 | 						// paths loop
 75 | 						for(var j=0; j<tracedata.layers[i].length; j++){
 76 | 							
 77 | 							// reset this path segments
 78 | 							tracedata.layers[i][j].segments = [];
 79 | 							
 80 | 							// count new points
 81 | 							pointcnt += newpointscontainer[i][j].length;
 82 | 						
 83 | 							// segments loop
 84 | 							for(var k=0; k<newpointscontainer[i][j].length; k++){
 85 | 							
 86 | 								// create new segments from new points
 87 | 								tracedata.layers[i][j].segments.push(
 88 | 									{
 89 | 									type:'L',
 90 | 									x1: newpointscontainer[i][j][k].x,
 91 | 									y1: newpointscontainer[i][j][k].y,
 92 | 									x2: newpointscontainer[i][j][(k+1)%newpointscontainer[i][j].length].x,
 93 | 									y2: newpointscontainer[i][j][(k+1)%newpointscontainer[i][j].length].y
 94 | 									}
 95 | 								);
 96 | 								
 97 | 							}// End of segments loop
 98 | 	
 99 | 							if(j===0){ console.log(JSON.stringify(tracedata.layers[i][j].segments)); }
100 | 	
101 | 						}// End of paths loop
102 | 						
103 | 					}// End of layers loop
104 | 					
105 | 					// log new SVG stats
106 | 					document.getElementById('log').innerHTML += 'New point count: '+pointcnt+'<br/>';
107 | 					
108 | 					// display new SVG
109 | 					ImageTracer.appendSVGString( ImageTracer.getsvgstring(tracedata,options), 'svgcontainer' );
110 | 					
111 | 					
112 | 				},// End of imageToTracedata() callback
113 | 				
114 | 				options // for tracing
115 | 				
116 | 			);// End of imageToTracedata()
117 | 
118 | 		}// End of onload_init()
119 | 		
120 | 	</script>
121 | </head>
122 | <body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
123 | 	<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
124 | 	<div id="svgcontainer"></div> <div id="log"></div>
125 | </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/smiley.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/smiley.png


--------------------------------------------------------------------------------
/smileyRGB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/smileyRGB.png


--------------------------------------------------------------------------------
/testimages/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/1.png


--------------------------------------------------------------------------------
/testimages/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/10.png


--------------------------------------------------------------------------------
/testimages/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/11.png


--------------------------------------------------------------------------------
/testimages/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/12.png


--------------------------------------------------------------------------------
/testimages/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/13.png


--------------------------------------------------------------------------------
/testimages/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/14.png


--------------------------------------------------------------------------------
/testimages/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/15.png


--------------------------------------------------------------------------------
/testimages/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/16.png


--------------------------------------------------------------------------------
/testimages/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/2.png


--------------------------------------------------------------------------------
/testimages/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/3.png


--------------------------------------------------------------------------------
/testimages/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/4.png


--------------------------------------------------------------------------------
/testimages/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/5.png


--------------------------------------------------------------------------------
/testimages/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/6.png


--------------------------------------------------------------------------------
/testimages/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/7.png


--------------------------------------------------------------------------------
/testimages/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/8.png


--------------------------------------------------------------------------------
/testimages/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/9.png


--------------------------------------------------------------------------------
/testimages/combined.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jankovicsandras/imagetracerjs/cb0c84a309df5e75614d3b5166cdc77a56f12a98/testimages/combined.png


--------------------------------------------------------------------------------
/version_history.md:
--------------------------------------------------------------------------------
 1 | ## Version history
 2 | 
 3 | ### 1.2.6
 4 |  - FIXED: hole shape parent search (Issues #31 #39)
 5 |  - FIXED: Handle (absolute) paths in CLI correctly Issue #42
 6 | 
 7 | ### 1.2.5
 8 |  - RGBA ImageData check in colorquantization(), solving Issue #24 and #18
 9 | 
10 | ### 1.2.4
11 |  - ```options.layering``` : default 0 = sequential, new method ; 1 = parallel, old method. (Enhancement Issue #17)
12 |  - case insensitive option preset names
13 |  - README.md reorganizing
14 | 
15 | ### 1.2.3
16 | 
17 |  - Node.js Command line interface (Enhancement Issue #13)
18 |  - FIXED: Pathomit problem thanks to EusthEnoptEron (Issue #14)
19 |  - options.corsenabled for [CORS Image loading](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) thanks to neel-radica (Issue #12)
20 | 
21 | ### 1.2.2
22 | 
23 |  - FIXED: missing hole in path because of incorrect bounding box (Issue #11)
24 |  - Posterized3 option preset
25 |  - Changed svgpathstring() arguments to simplify getsvgstring()
26 | 
27 | ### 1.2.1
28 | 
29 |  - FIXED: Gaussian blur preprocessing is now independent of DOM and canvas, thus working directly with Node.js (Issue #9)
30 | 
31 | ### 1.2.0
32 | 
33 | This is a major update, changing some internal logic and option default values. The API is compatible, so it should work out of the box.
34 | 
35 |  - FIXED: transparent holes are now possible. ( Issue #7 and #8 )
36 |  - Deterministic output by default: ```options.colorsampling = 2``` ; ```options.mincolorratio = 0``` are deterministic and the defaults now.
37 |  - Right angle enhancing: ```options.rightangleenhance``` ( default : true )
38 |  - Option presets (see below)
39 |  - Custom strokewidth with ```options.strokewidth``` ( default : 1 )
40 |  - Line filter with ```options.linefilter``` ( default : false )
41 |  - Simplified ```getsvgstring()```; ```options.desc = false``` by default; splitpoint = fitpoint in fitseq(); small bugfixes and optimizations
42 | 
43 | Version history and README for the old 1.1.2 version is [here.](https://github.com/jankovicsandras/imagetracerjs/blob/master/README_v1.1.2.md)
44 | 
45 | ### 1.1.2
46 | 
47 | - minor bugfixes
48 | - lookup based ```pathscan()```
49 | 
50 | ### 1.1.1
51 | 
52 | - Bugfix: CSS3 RGBA output in SVG was technically incorrect (however supported by major browsers), so this is changed. [More info](https://stackoverflow.com/questions/6042550/svg-fill-color-transparency-alpha)
53 | 
54 | ### 1.1.0
55 | 
56 | - it works with Node.js (external library required to load image into an ImageData object)
57 | - export as AMD module / Node module / browser or worker variable
58 | - new syntax: ```ImageTracer112.imageToTracedata()```, no need to initialize
59 | - fixed ```options``` with hasOwnProperty: 0 values are not replaced with defaults, fixed polygons with coordinates x=0 or y=0
60 | - transparency support: alpha is not discarded now, it is given more weight in color quantization
61 | - new ```options.roundcoords``` : rounding coordinates to a given decimal place. This can reduce SVG length significantly (>20%) with minor loss of precision.
62 | - new ```options.desc``` : setting this to false will turn off path descriptions, reducing SVG length.
63 | - new ```options.viewbox``` : setting this to true will use viewBox instead of exact width and height
64 | - new ```options.colorsampling``` : color quantization will sample the colors now by default, can be turned off.
65 | - new ```options.blurradius``` : setting this to 1..5 will preprocess the image with a selective Gaussian blur with ```options.blurdelta``` treshold. This can filter noise and improve quality.
66 | - ```imagedataToTracedata()``` returns image width and height in tracedata
67 | - ```getsvgstring()``` needs now only ```tracedata``` and ```options``` as parameters
68 | - ```colorquantization()``` needs now only ```imgd``` and ```options``` as parameters
69 | - background field is removed from the results of color quantization 
70 | - ESLint passed
71 | - test automation and simple statistics in imagetracer_test_automation.html
72 | 
73 | ### 1.0.0 - 1.0.4
74 | 
75 | - first published version + bugfixes


--------------------------------------------------------------------------------