From 549f4bb38b999a6fbcf9517ecb0a9d9452349f5d Mon Sep 17 00:00:00 2001
From: Nayuki Minase <nayuki@eigenstate.org>
Date: Mon, 18 Apr 2016 20:48:40 +0000
Subject: [PATCH] Added HTML elements and JavaScript demo code to support QR
 Code output as an SVG vector image.

---
 javascript/qrcodegen-demo.js      | 61 ++++++++++++++++++++++---------
 javascript/qrcodegen-js-demo.html | 21 ++++++++++-
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/javascript/qrcodegen-demo.js b/javascript/qrcodegen-demo.js
index 83ce9d3..b3a65de 100644
--- a/javascript/qrcodegen-demo.js
+++ b/javascript/qrcodegen-demo.js
@@ -26,6 +26,26 @@
 
 
 function redrawQrCode() {
+	// Show/hide rows based on bitmap/vector image output
+	var bitmapOutput = document.getElementById("output-format-bitmap").checked;
+	var scaleRow = document.getElementById("scale-row");
+	var svgXmlRow = document.getElementById("svg-xml-row");
+	if (bitmapOutput) {
+		scaleRow.style.removeProperty("display");
+		svgXmlRow.style.display = "none";
+	} else {
+		scaleRow.style.display = "none";
+		svgXmlRow.style.removeProperty("display");
+	}
+	var svgXml = document.getElementById("svg-xml-output");
+	svgXml.value = "";
+	
+	// Reset output images in case of early termination
+	var canvas = document.getElementById("qrcode-canvas");
+	var svg = document.getElementById("qrcode-svg");
+	canvas.style.display = "none";
+	svg.style.display = "none";
+	
 	// Returns a QrCode.Ecc object based on the radio buttons in the HTML form.
 	function getInputErrorCorrectionLevel() {
 		if (document.getElementById("errcorlvl-medium").checked)
@@ -38,11 +58,6 @@ function redrawQrCode() {
 			return qrcodegen.QrCode.Ecc.LOW;
 	}
 	
-	// Reset canvas in case of early termination
-	var canvas = document.getElementById("qrcode-canvas");
-	canvas.width = 0;
-	canvas.height = 0;
-	
 	// Get form inputs and compute QR Code
 	var ecl = getInputErrorCorrectionLevel();
 	var text = document.getElementById("text-input").value;
@@ -53,22 +68,32 @@ function redrawQrCode() {
 	var boostEcc = document.getElementById("boost-ecc-input").checked;
 	var qr = qrcodegen.QrCode.encodeSegments(segs, ecl, minVer, maxVer, mask, boostEcc);
 	
-	// Get scale and border
-	var scale = parseInt(document.getElementById("scale-input").value, 10);
+	// Draw image output
 	var border = parseInt(document.getElementById("border-input").value, 10);
-	if (scale <= 0 || border < 0 || scale > 30 || border > 100)
+	if (border < 0 || border > 100)
 		return;
-	
-	// Draw QR Code onto canvas
-	var width = (qr.getSize() + border * 2) * scale;
-	canvas.width = width;
-	canvas.height = width;
-	var ctx = canvas.getContext("2d");
-	for (var y = -border; y < qr.getSize() + border; y++) {
-		for (var x = -border; x < qr.getSize() + border; x++) {
-			ctx.fillStyle = qr.getModule(x, y) == 1 ? "#000000" : "#FFFFFF";
-			ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale);
+	if (bitmapOutput) {
+		var scale = parseInt(document.getElementById("scale-input").value, 10);
+		if (scale <= 0 || scale > 30)
+			return;
+		// Draw QR Code onto canvas
+		var width = (qr.getSize() + border * 2) * scale;
+		canvas.width = width;
+		canvas.height = width;
+		var ctx = canvas.getContext("2d");
+		for (var y = -border; y < qr.getSize() + border; y++) {
+			for (var x = -border; x < qr.getSize() + border; x++) {
+				ctx.fillStyle = qr.getModule(x, y) == 1 ? "#000000" : "#FFFFFF";
+				ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale);
+			}
 		}
+		canvas.style.removeProperty("display");
+	} else {
+		var code = qr.toSvgString(border);
+		svg.setAttribute("viewBox", / viewBox="([^"]*)"/.exec(code)[1]);
+		svg.querySelector("path").setAttribute("d", / d="([^"]*)"/.exec(code)[1]);
+		svg.style.removeProperty("display");
+		svgXml.value = qr.toSvgString(border);
 	}
 	
 	
diff --git a/javascript/qrcodegen-js-demo.html b/javascript/qrcodegen-js-demo.html
index e3f0733..36d4849 100644
--- a/javascript/qrcodegen-js-demo.html
+++ b/javascript/qrcodegen-js-demo.html
@@ -60,13 +60,20 @@
 				</td>
 			</tr>
 			<tr>
-				<td>Scale:</td>
-				<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em" oninput="redrawQrCode();"> pixels per module</td>
+				<td>Output&#xA0;format:</td>
+				<td>
+					<input type="radio" name="output-format" id="output-format-bitmap" onchange="redrawQrCode();" checked="checked"><label for="output-format-bitmap">Bitmap</label>
+					<input type="radio" name="output-format" id="output-format-vector" onchange="redrawQrCode();"><label for="output-format-vector">Vector</label>
+				</td>
 			</tr>
 			<tr>
 				<td>Border:</td>
 				<td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em" oninput="redrawQrCode();"> modules</td>
 			</tr>
+			<tr id="scale-row">
+				<td>Scale:</td>
+				<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em" oninput="redrawQrCode();"> pixels per module</td>
+			</tr>
 			<tr>
 				<td>Statistics:</td>
 				<td id="statistics-output" style="white-space:pre"></td>
@@ -75,6 +82,16 @@
 				<td>QR&#xA0;Code:</td>
 				<td>
 					<canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas>
+					<svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8">
+						<rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0"></rect>
+						<path d="" fill="#000000" stroke-width="0"></path>
+					</svg>
+				</td>
+			</tr>
+			<tr id="svg-xml-row">
+				<td>SVG&#xA0;XML&#xA0;code:</td>
+				<td>
+					<textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea>
 				</td>
 			</tr>
 		</tbody>