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.

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

How to use in plain HTML javascript? #25

Open
twooclock opened this issue Feb 24, 2023 · 1 comment
Open

How to use in plain HTML javascript? #25

twooclock opened this issue Feb 24, 2023 · 1 comment

Comments

@twooclock
Copy link

Is it possible to use qrcode.js in a HTML page using <script> tag?

I tried this:

<script type="module" src="~/plugins/js-qrcode/qrcode.js"></script>

and also this:

<script type="module"> import { QRCodeCanvas } from '../plugins/js-qrcode/qrcode.js'; </script>

but always got JS errors...

@twooclock
Copy link
Author

I managed to solve this using Browserify so I might as well post my solution for others.

  1. I had node and npm installed (if not google for installation instructions)
  2. Make a folder browserify and open command prompt in it
  3. install qrcode module: npm install @cheprasov/qrcode
  4. install browserify: npm install -g browserify
  5. create main.js file with following two lines:
var qr = require('@cheprasov/qrcode');
global.window.qr = qr;

6.execute command browserify main.js -o qrcode.web.js
7.copy file qrcode.web.js where needed, reference it as usual with <script src="~/qrcode.web.js"></script>
8. use it in HTML javascript like:

const qrCanvas = new qr.QRCodeCanvas('some value for QR code');
const qrdataurl= qrCanvas.toDataUrl();
//assuming you have <img id ="imgQR" src="" /> somewhere in your HTML
document.getElementById("imgQR").src=qrdataurl; 

Not sure everything is perfect but works for my case...!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant