imagetracerjs - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

bower.json

@@ -8,3 +8,3 @@ {
   },
-  "main": "imagetracer_v1.1.2.js",
+  "main": "imagetracer_v1.2.0.js",
   "keywords": [
@@ -21,3 +21,2 @@ "image",
     "converting",
-    "tracing",
     "bitmap",
@@ -24,0 +23,0 @@ "svg",

deterministic.md

@@ -1,3 +0,7 @@
-## TLDR; choices for deterministic tracing:
+
+# WARNING: version(s) >= 1.2.0 is deterministic by default.
+# This is kept here for versions <= 1.1.2
 
+## TLDR; options for deterministic tracing:
+
 custom palette, `colorquantcycles`:1
@@ -4,0 +8,0 @@

imagetracer_v1.1.2.js

@@ -41,3 +41,3 @@ /*
 
-function ImageTracer(){
+function ImageTracer112(){
 	var _this = this;
@@ -925,7 +925,7 @@
 // export as AMD module / Node module / browser or worker variable // TODO: new ?
-if (typeof define === 'function' && define.amd) define(function() { return new ImageTracer(); });
-else if (typeof module !== 'undefined') module.exports = new ImageTracer();
-else if (typeof self !== 'undefined') self.ImageTracer = new ImageTracer();
-else window.ImageTracer = new ImageTracer();
+if (typeof define === 'function' && define.amd) define(function() { return new ImageTracer112(); });
+else if (typeof module !== 'undefined') module.exports = new ImageTracer112();
+else if (typeof self !== 'undefined') self.ImageTracer112 = new ImageTracer112();
+else window.ImageTracer112 = new ImageTracer112();
 
 })();

nodetest/nodetest.js

 "use strict";
 
-var fs = require("fs");
+var fs = require('fs');
 
-var ImageTracer = require(__dirname +'/../imagetracer_v1.1.2');
+var ImageTracer = require( __dirname + '/../imagetracer_v1.2.0' );
 
 // This example uses https://github.com/arian/pngjs 
 // , but other libraries can be used to load an image file to an ImageData object.
-var PNGReader = require(__dirname +'/PNGReader');
+var PNGReader = require( __dirname + '/PNGReader' );
 
-var file = __dirname + "/../testimages/1.png";
-
-fs.readFile(file, function(err, bytes){
-	if (err) throw err;
-
-	var reader = new PNGReader(bytes);
-
-	reader.parse(function(err, png){
-		if (err) throw err;
+fs.readFile(
 		
-		// creating an ImageData object
-		var myImageData = { 'width':png.width, 'height':png.height, 'data':png.pixels };
+	__dirname + '/../testimages/1.png', // Input file path
+	
+	function( err, bytes ){
+		if(err){ throw err; }
+	
+		var reader = new PNGReader(bytes);
+	
+		reader.parse( function( err, png ){
+			if(err){ throw err; }
+			
+			// creating an ImageData object
+			var myImageData = { width:png.width, height:png.height, data:png.pixels };
+			
+			// tracing to SVG string
+			var options = { ltres:0.1 }; // optional
+			var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
+			
+			// writing to file
+			fs.writeFile(
+				__dirname + '/test.svg', // Output file path
+				svgstring,
+				function(err){ if(err){ throw err; } console.log( __dirname + '/test.svg was saved!' ); }
+			);
+			
+		});// End of reader.parse()
 		
-		// tracing
-		var options = { 'ltres':0.1 }; // optional
-		var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
-		
-		// writing to file
-		fs.writeFile(__dirname+"/test.svg", svgstring, function(err) {
-			if (err) throw err;
-			console.log(__dirname+"/test.svg was saved!");
-		});
-		
-	});// End of reader.parse()
-
-});// End of fs.readFile()
+	}// End of readFile callback()
+	
+);// End of fs.readFile()

nodetest/READTHIS.md

@@ -6,3 +6,3 @@ Run like this:
 imagetracer.js path in this example is
-../imagetracer_v1.1.1.js
+../imagetracer_v1.2.0.js
 
@@ -13,2 +13,2 @@ PNG.js and PNGReader.js are saved on 2016-03-04 from
 
-I could not find any license there, so I assume these are in public domain. Please check it.
+I could not find any license there, so I assume these are in public domain. Please check it.

package.json

 {
   "name": "imagetracerjs",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "raster image tracer and vectorizer, bitmap to SVG converter",
-  "main": "imagetracer_v1.1.2.js",
+  "main": "imagetracer_v1.2.0.js",
   "scripts": {
@@ -7,0 +7,0 @@ "test": "node ./nodetest/nodetest.js"

process_overview.md

 ### Process overview
-####1. Color quantization
+#### 1. Color quantization
 The **colorquantization** function creates an indexed image (https://en.wikipedia.org/wiki/Indexed_color)
 
 ![alt Original image (20x scale)](docimages/s2.png)
-####2. Layer separation and edge detection
+
+#### 2. Layer separation and edge detection
 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.
@@ -12,7 +13,9 @@
 ![alt edge node examples](docimages/s7.png)
-####3. Pathscan
+
+#### 3. Pathscan
 The **pathscan** function finds chains of edge nodes, example: the cyan dots and lines.
 
 ![alt an edge node path](docimages/s8.png)
-####4. Interpolation
+
+#### 4. Interpolation
 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).
@@ -22,3 +25,4 @@
 ![alt interpolation result](docimages/s10.png)
-####5. Tracing
+
+#### 5. Tracing
 The **tracepath** function splits the interpolated paths into sequences with two directions.
@@ -39,3 +43,4 @@
 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.
-####6. SVG rendering
+
+#### 6. SVG rendering
 The coordinates are rendered to [SVG Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) in the **getsvgstring** function.
@@ -52,2 +57,2 @@
 - Default values: they are chosen because they seemed OK, not based on calculations.
-- 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?
+- 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?

README.md

@@ -6,36 +6,40 @@ # imagetracerjs
 
-by András Jankovics 2015, 2016
+by András Jankovics
 
-### 1.1.2
+### 1.2.0
 
-- minor bugfixes
-- lookup based ```pathscan()```
+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.
 
-### 1.1.1
+ - FIXED: transparent holes are now possible. ( Issue #7 and #8 )
+ - Deterministic output by default: ```options.colorsampling = 2``` ; ```options.mincolorratio = 0``` are deterministic and the defaults now.
+ - Right angle enhancing: ```options.rightangleenhance``` ( default : true )
+ - Option presets (see below)
+ - Custom strokewidth with ```options.strokewidth``` ( default : 1 )
+ - Line filter with ```options.linefilter``` ( default : false )
+ - Simplified ```getsvgstring()```; ```options.desc = false``` by default; splitpoint = fitpoint in fitseq(); small bugfixes and optimizations
 
-- 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)
+Version history and README for the old 1.1.2 version is [here.](README_v1.1.2.md)
 
-### 1.1.0
+### Option presets
 
-- it works with Node.js (external library required to load image into an ImageData object)
-- export as AMD module / Node module / browser or worker variable
-- new syntax: ```ImageTracer.imageToTracedata()```, no need to initialize
-- fixed ```options``` with hasOwnProperty: 0 values are not replaced with defaults, fixed polygons with coordinates x=0 or y=0
-- transparency support: alpha is not discarded now, it is given more weight in color quantization
-- new ```options.roundcoords``` : rounding coordinates to a given decimal place. This can reduce SVG length significantly (>20%) with minor loss of precision.
-- new ```options.desc``` : setting this to false will turn off path descriptions, reducing SVG length.
-- new ```options.viewbox``` : setting this to true will use viewBox instead of exact width and height
-- new ```options.colorsampling``` : color quantization will sample the colors now by default, can be turned off.
-- 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.
-- ```imagedataToTracedata()``` returns image width and height in tracedata
-- ```getsvgstring()``` needs now only tracedata and options as parameters
-- ```colorquantization()``` needs now only imgd and options as parameters
-- background field is removed from the results of color quantization 
-- ESLint passed
-- test automation and simple statistics in imagetracer_test_automation.html
+Are you confused by the many parameters and their meaning in the options object? Just use a preset like this:
+```javascript
+// This uses the 'Posterized2' option preset and appends the SVG to an element with id="svgcontainer"
+ImageTracer.imageToSVG(
+	'panda.png', // Input filename
+	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); }, // callback function to append the SVG to the svgcontainer div
+	'Posterized2' // Option preset
+);
+```
 
+![Option presets gallery](docimages/option_presets_small.png)
+
+These strings can be passed instead of the options object: 'Default', 'Posterized1', 'Posterized2', 'Curvy', 'Sharp', 'Detailed', 'Smoothed', 'Grayscale', 'Fixedpalette', 'Randomsampling1', 'Randomsampling2', 'Artistic1', 'Artistic2', 'Artistic3', 'Artistic4' .
+
+Check out [imagetracer_options_gallery.html](https://github.com/jankovicsandras/imagetracerjs/blob/master/imagetracer_options_gallery.html) or a [bigger image](docimages/option_presets.png).
+
 ### Using in the browser
 Include the script:
 ```javascript
-<script src="imagetracer_v1.1.2.js"></script>
+<script src="imagetracer_v1.2.0.js"></script>
 ```
@@ -51,10 +55,10 @@ Then
 // Almost the same with options, and the ImageTracer.appendSVGString callback will append the SVG
-ImageTracer.imageToSVG( 'smiley.png', ImageTracer.appendSVGString, { ltres:0.1, qtres:1, scale:10 } );
+ImageTracer.imageToSVG( 'smiley.png', ImageTracer.appendSVGString, { ltres:0.1, qtres:1, scale:10, strokewidth:5 } );
 
 
-// This appends the SVG to an element with id="svgcontainer"
+// This uses the 'Posterized2' option preset and appends the SVG to an element with id="svgcontainer"
 ImageTracer.imageToSVG(
 	'panda.png',
 	function(svgstr){ ImageTracer.appendSVGString( svgstr, 'svgcontainer' ); },
-	{ numberofcolors:4 }
+	'Posterized2'
 );
@@ -119,42 +123,48 @@
 
-var fs = require("fs");
+var fs = require('fs');
 
-var ImageTracer = require(__dirname +'/../imagetracer_v1.1.2');
+var ImageTracer = require( __dirname + '/../imagetracer_v1.2.0' );
 
 // This example uses https://github.com/arian/pngjs 
 // , but other libraries can be used to load an image file to an ImageData object.
-var PNGReader = require(__dirname +'/PNGReader');
+var PNGReader = require( __dirname + '/PNGReader' );
 
-var file = __dirname + "/../testimages/1.png";
-
-fs.readFile(file, function(err, bytes){
-	if (err) throw err;
-
-	var reader = new PNGReader(bytes);
-
-	reader.parse(function(err, png){
-		if (err) throw err;
+fs.readFile(
 		
-		// creating an ImageData object
-		var myImageData = { 'width':png.width, 'height':png.height, 'data':png.pixels };
+	__dirname + '/../testimages/1.png', // Input file path
+	
+	function( err, bytes ){
+		if(err){ throw err; }
+	
+		var reader = new PNGReader(bytes);
+	
+		reader.parse( function( err, png ){
+			if(err){ throw err; }
+			
+			// creating an ImageData object
+			var myImageData = { width:png.width, height:png.height, data:png.pixels };
+			
+			// tracing to SVG string
+			var options = { ltres:0.1 }; // optional
+			var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
+			
+			// writing to file
+			fs.writeFile(
+				__dirname + '/test.svg', // Output file path
+				svgstring,
+				function(err){ if(err){ throw err; } console.log( __dirname + '/test.svg was saved!' ); }
+			);
+			
+		});// End of reader.parse()
 		
-		// tracing
-		var options = { 'ltres':0.1 }; // optional
-		var svgstring = ImageTracer.imagedataToSVG( myImageData, options );
-		
-		// writing to file
-		fs.writeFile(__dirname+"/test.svg", svgstring, function(err) {
-			if (err) throw err;
-			console.log(__dirname+"/test.svg was saved!");
-		});
-		
-	});// End of reader.parse()
-
-});// End of fs.readFile()
-
+	}// End of readFile callback()
+	
+);// End of fs.readFile()
 ```
 
 ### Deterministic output
-See [choices for deterministic tracing](https://github.com/jankovicsandras/imagetracerjs/blob/master/deterministic.md)
+ImageTracer version >= 1.2.0 is deterministic by default, but randomization can be turned back on.
 
+This is relevant to versions < 1.2.0 : [options for deterministic tracing](https://github.com/jankovicsandras/imagetracerjs/blob/master/deterministic.md)
+
 ### Main Functions
@@ -186,13 +196,16 @@ |Function name|Arguments|Returns|Run type|
 |```pathomit```|```8```|Edge node paths shorter than this will be discarded for noise reduction.|
+|```rightangleenhance```|```true```|Enhance right angle corners.|
 |```pal```|No default value|Custom palette, an array of color objects: ```[ {r:0,g:0,b:0,a:255}, ... ]```|
-|```colorsampling```|```true```|Enable or disable color sampling.|
+|```colorsampling```|```2```|0: disabled, generating a palette; 1: random sampling; 2: deterministic sampling|
 |```numberofcolors```|```16```|Number of colors to use on palette if pal object is not defined.|
-|```mincolorratio```|```0.02```|Color quantization will randomize a color if fewer pixels than (total pixels*mincolorratio) has it.|
+|```mincolorratio```|```0```|Color quantization will randomize a color if fewer pixels than (total pixels*mincolorratio) has it.|
 |```colorquantcycles```|```3```|Color quantization will be repeated this many times.|
 |```blurradius```|```0```|Set this to 1..5 for selective Gaussian blur preprocessing.|
 |```blurdelta```|```20```|RGBA delta treshold for selective Gaussian blur preprocessing.|
+|```strokewidth```|```1```|[SVG stroke-width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)|
+|```linefilter```|```false```|Enable or disable line filter for noise reduction.|
 |```scale```|```1```|Every coordinate will be multiplied with this, to scale the SVG.|
 |```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|
 |```viewbox```|```false```|Enable or disable SVG viewBox.|
-|```desc```|```true```|Enable or disable SVG descriptions.|
+|```desc```|```false```|Enable or disable SVG descriptions.|
 |```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.|
@@ -204,3 +217,3 @@ |```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.|
 ```javascript
-var options = {"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};
+var options = {ltres:1, qtres:1, pathomit:8, rightangleenhance:true, colorsampling:2, numberofcolors:16, mincolorratio:0, colorquantcycles:3, blurradius:0, blurdelta:20, strokewidth:1, linefilter:false, scale:1, roundcoords:1, lcpr:0, qcpr:0, desc:false, viewbox:false };
 ```
@@ -212,2 +225,16 @@ Adding custom palette. This will override numberofcolors.
 
+### Legacy 1.1.2 version
+
+The 1.1.2 version can be used like this: *ImageTracer112*.imageToSVG()
+
+Include the script:
+```javascript
+<script src="imagetracer_v1.1.2.js"></script>
+```
+Then
+```javascript
+// Loading smiley.png, tracing and calling alert callback on the SVG string result 
+ImageTracer112.imageToSVG( 'smiley.png', alert );
+```
+
 ### Process overview
@@ -214,0 +241,0 @@ See [Process overview and Ideas for improvement](https://github.com/jankovicsandras/imagetracerjs/blob/master/process_overview.md)

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3322662

increased by297.83%

Number of package files

62

increased by24%

Lines of code

2230

increased by1.69%

Number of lines in readme file

264

increased by11.39%

No dependency changes