Merge pull request #152 from lindell/external-xml-impl

External xml implementation

package.json

@@ -62,7 +62,8 @@
     "request": "^2.72.0",
     "run-sequence": "^1.1.5",
     "webpack": "^2.1.0-beta.5",
-    "webpack-stream": "^3.1.0"
+    "webpack-stream": "^3.1.0",
+    "xmldom": "^0.1.27"
   },
   "typings": "./jsbarcode.d.ts",
   "config": {

src/help/getRenderProperties.js

@@ -36,7 +36,10 @@ function getRenderProperties(element){
 		return newCanvasRenderProperties(element);
 	}
 	// If SVG
-	else if(typeof SVGElement !== 'undefined' && element instanceof SVGElement){
+	else if(
+		(element && element.nodeName === 'svg') ||
+		(typeof SVGElement !== 'undefined' && element instanceof SVGElement)
+	){
 		return {
 			element: element,
 			options: getOptionsFromElement(element),

src/renderers/shared.js

@@ -65,13 +65,18 @@ function getMaximumHeightOfEncodings(encodings){
 
 function messureText(string, options, context){
 	var ctx;
-	if(typeof context === "undefined"){
+
+	if(context){
+		ctx = context;
+	}
+	else if(typeof document !== "undefined"){
 		ctx = document.createElement("canvas").getContext("2d");
 	}
 	else{
-		ctx = context;
+		// If the text cannot be messured we will return 0.
+		// This will make some barcode with big text render incorrectly
+		return 0;
 	}
-
 	ctx.font = options.fontOptions + " " + options.fontSize + "px " + options.font;
 
 	// Calculate the width of the encoding

src/renderers/svg.js

@@ -8,6 +8,7 @@ class SVGRenderer{
 		this.svg = svg;
 		this.encodings = encodings;
 		this.options = options;
+		this.document = options.xmlDocument || document;
 	}
 
 	render(){
@@ -18,9 +19,9 @@ class SVGRenderer{
 			var encoding = this.encodings[i];
 			var encodingOptions = merge(this.options, encoding.options);
 
-			var group = createGroup(currentX, encodingOptions.marginTop, this.svg);
+			var group = this.createGroup(currentX, encodingOptions.marginTop, this.svg);
 
-			setGroupOptions(group, encodingOptions);
+			this.setGroupOptions(group, encodingOptions);
 
 			this.drawSvgBarcode(group, encodingOptions, encoding);
 			this.drawSVGText(group, encodingOptions, encoding);
@@ -43,7 +44,7 @@ class SVGRenderer{
 		this.setSvgAttributes(width, maxHeight);
 
 		if(this.options.background){
-			drawRect(0, 0, width, maxHeight, this.svg).setAttribute(
+			this.drawRect(0, 0, width, maxHeight, this.svg).setAttribute(
 				"style", "fill:" + this.options.background + ";"
 			);
 		}
@@ -70,19 +71,19 @@ class SVGRenderer{
 				barWidth++;
 			}
 			else if(barWidth > 0){
-				drawRect(x - options.width * barWidth, yFrom, options.width * barWidth, options.height, parent);
+				this.drawRect(x - options.width * barWidth, yFrom, options.width * barWidth, options.height, parent);
 				barWidth = 0;
 			}
 		}
 
 		// Last draw is needed since the barcode ends with 1
 		if(barWidth > 0){
-			drawRect(x - options.width * (barWidth - 1), yFrom, options.width * barWidth, options.height, parent);
+			this.drawRect(x - options.width * (barWidth - 1), yFrom, options.width * barWidth, options.height, parent);
 		}
 	}
 
 	drawSVGText(parent, options, encoding){
-		var textElem = document.createElementNS(svgns, 'text');
+		var textElem = this.document.createElementNS(svgns, 'text');
 
 		// Draw the text if displayValue is set
 		if(options.displayValue){
@@ -117,7 +118,7 @@ class SVGRenderer{
 			textElem.setAttribute("x", x);
 			textElem.setAttribute("y", y);
 
-			textElem.appendChild(document.createTextNode(encoding.text));
+			textElem.appendChild(this.document.createTextNode(encoding.text));
 
 			parent.appendChild(textElem);
 		}
@@ -135,39 +136,36 @@ class SVGRenderer{
 		svg.setAttribute("xmlns", svgns);
 		svg.setAttribute("version", "1.1");
 
-		svg.style.transform = "translate(0,0)";
+		svg.setAttribute("style", "transform: translate(0,0)");
 	}
-}
-
-
 
-function createGroup(x, y, parent){
-	var group = document.createElementNS(svgns, 'g');
+	createGroup(x, y, parent){
+		var group = this.document.createElementNS(svgns, 'g');
+		group.setAttribute("transform", "translate(" + x + ", " + y + ")");
 
-	group.setAttribute("transform", "translate(" + x + ", " + y + ")");
+		parent.appendChild(group);
 
-	parent.appendChild(group);
-
-	return group;
-}
+		return group;
+	}
 
-function setGroupOptions(group, options){
-	group.setAttribute("style",
-		"fill:" + options.lineColor + ";"
-	);
-}
+	setGroupOptions(group, options){
+		group.setAttribute("style",
+			"fill:" + options.lineColor + ";"
+		);
+	}
 
-function drawRect(x, y, width, height, parent){
-	var rect = document.createElementNS(svgns, 'rect');
+	drawRect(x, y, width, height, parent){
+		var rect = this.document.createElementNS(svgns, 'rect');
 
-	rect.setAttribute("x", x);
-	rect.setAttribute("y", y);
-	rect.setAttribute("width", width);
-	rect.setAttribute("height", height);
+		rect.setAttribute("x", x);
+		rect.setAttribute("y", y);
+		rect.setAttribute("width", width);
+		rect.setAttribute("height", height);
 
-	parent.appendChild(rect);
+		parent.appendChild(rect);
 
-	return rect;
+		return rect;
+	}
 }
 
 export default SVGRenderer;

test/node/nodesvg.test.js

@@ -0,0 +1,20 @@
+var assert = require('assert');
+var JsBarcode = require('../../bin/JsBarcode.js');
+var xmldom  = require('xmldom');
+var DOMImplementation = xmldom.DOMImplementation;
+var XMLSerializer = xmldom.XMLSerializer;
+var xmlSerializer = new XMLSerializer();
+var document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
+
+describe('SVG', function() {
+  it('should work with external SVG implementation', function () {
+    var svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+    JsBarcode(svgNode, 'test', {
+      xmlDocument: document
+    });
+
+    var xml = xmlSerializer.serializeToString(svgNode);
+    assert(xml.length > 200);
+  });
+});