Standalone version of svg_object, making it possible to use it dependency free in the browser #51
Description
Greetings and thanks for the excellent library.
As it is the library has a hard dependency on nodejs caused by the use of two constructs:
With this small set of backward compatible changes (sent as a Pull Request #50) it becomes possible to create a browser standalone version of svg_object packing the following snippet of code with webpack
window.svg_object = require('qr-image/lib/svg-object');
Including the generated javascript file it becomes possible dynamically create QR Codes in the browser in a completely independent and standalone fashion with no additional dependencies (not even nodejs).
`
<head>
<meta charset='utf-8' />
<title>Standalone SVG Object example</title>
<script type='application/javascript' src='svg-object.js'></script>
<script>
// Passes the arguments to svg_object, returns an DOM element with the resulting SVG
function createQRCodeElement() {
var NS = 'http://www.w3.org/2000/svg';
var args = [].slice.call(arguments);
var svg_obj = svg_object.apply(this, args);
var viewBox = '0 0 ' + svg_obj.size + ' ' + svg_obj.size;
var svg_element = document.createElementNS(NS, 'svg');
svg_element.setAttribute('viewBox', viewBox);
var path_element = document.createElementNS(NS, 'path');
path_element.setAttribute('d', svg_obj.path);
svg_element.appendChild(path_element);
return svg_element;
}
window.onload = function() {
var svg_element = createQRCodeElement('Hello World');
document.getElementById('qrCode').appendChild(svg_element);
}
</script>
<style>
#qrCode {
width: 100px;
height: 100px;
}
#qrCode > svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="qrCode"> </div>
</body>
</html>`
The end result of said script is what's visible below, a QR Code created inline at the page. The compiled js plus the sample html are attached to this issue as well
Best Regards