status-im
/
QR-Code-generator
mirror of https://github.com/status-im/QR-Code-generator.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added HTML elements and JavaScript demo code to support QR Code output as an SVG vector image.

This commit is contained in:
Nayuki Minase 2016-04-18 20:48:40 +00:00
parent fc705efac3
commit 549f4bb38b
2 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
javascript/qrcodegen-demo.js
View File

@ -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);
}

21
javascript/qrcodegen-js-demo.html
View File

@ -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>