Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Standalone version of svg_object, making it possible to use it dependency free in the browser #51

Open
ferdinando-ferreira opened this issue Aug 1, 2018 · 0 comments
Open

Standalone version of svg_object, making it possible to use it dependency free in the browser #51

ferdinando-ferreira opened this issue Aug 1, 2018 · 0 comments

Comments

@ferdinando-ferreira
Copy link

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:

  1. Readable, with its single use being in the qr_image function
  2. Buffer, used across the library

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">&nbsp;</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

screenshot - 01_08_2018 18_09_53

Best Regards
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ferdinando-ferreira