Great library with small footprint.

The only thing I'm missing is a renderer for SVG.

Any suggestions on how we could do this?

Hi,
when I look at the example to download a file, I feel like there is something missing.
https://qr.davidje13.com/docs/

<a href="#" download="qr.png" id="download-link">Download</a>

<script type="module">
  import { generate } from 'lean-qr';

  const code = generate('LEAN-QR LIBRARY');

  const dataUrl = qrCode.toDataURL({ scale: 10 });
  document.getElementById('download-link')
    .setAttribute('href', dataUrl);
</script>

• Where does qrCode come from?
• I don't think there is a function toDataURL on the returntype of generate

The Readme is missing what element should be used in the html template.

I played around with a <div>.

Looking through your example website I found the element should be a canvas with width and height.

• <canvas id="my-canvas" width="1" height="1"></canvas>

As someone who never used <canvas> before, this could be very helpful to include in the Readme.

I spent 3 hours on this.

Thank You!

Hi!

Thanks for the svg implementation, it's working great :)

I was having troubles generating a larger png file though.

as you have shown in the docs:

code.toCanvas(canvas)
a.href = canvas.toDataURL('image/png')

The problem with this is that the canvas size is fixed to x number of pixels depending on the complexity of the qr code.

I was able to work around it this way

// draw the qr code to a canvas
const canvas = document.createElement('canvas')
const code = generate('mytext')
code.toCanvas(canvas)

// create a second canvas to export a larger version
const outputCanvas = document.createElement('canvas')
outputCanvas.width = 1024
outputCanvas.height = 1024
const ctx = outputCanvas.getContext('2d')
// don't smooth when we scale up
ctx.imageSmoothingEnabled = false
// first we pass in the canvas and its size, then we pass in the size we want to resize to
ctx.drawImage(
  canvas,
  0,
  0,
  canvas.width,
  canvas.height,
  0,
  0,
  1024,
  1024,
)
return outputCanvas.toDataURL('image/png')

I don't know if you know of an easier way to scale the canvas up, or get a larger version of the qr code?

I though it might be good to add this to the docs :)

Description

I'm trying to add a QR Code in an vuejs app. Using the function toSvgDataURL will result in an console error:
Uncaught Error: Cannot find module 'lean-qr/extras/svg'

Usage

...

import { generate } from 'lean-qr'
import { toSvgDataURL } from 'lean-qr/extras/svg'

const code = generate(`https://qr.sli.do/${this.eventId}`)

const dataURL = toSvgDataURL(code, {
  on: 'black',
  off: 'transparent',
  padX: 4,
  padY: 4,
  width: null,
  height: null,
  scale: 1
})
console.log('dataURL', dataURL)

...

The same error occurrs for all methods relying on the import lean-qr/extras/svg

Full error message in browser console

cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/widgets/SlidoChat.vue?vue&type=script&lang=js&:10 Uncaught Error: Cannot find module 'lean-qr/extras/svg'
    at webpackMissingModule (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/widgets/SlidoChat.vue?vue&type=script&lang=js&:10:45)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/widgets/SlidoChat.vue?vue&type=script&lang=js&:10:138)
    at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/widgets/SlidoChat.vue?vue&type=script&lang=js& (app.js:2090:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (SlidoChat.vue?df27:1:1)
    at ./src/components/widgets/SlidoChat.vue?vue&type=script&lang=js& (app.js:7017:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (SlidoChat.vue?bbb8:1:1)

When using lean-qr in my angular app it's warning me: depends on 'lean-qr'. CommonJS or AMD dependencies can cause optimization bailouts.

Would you consider adding an ESM build?

I don't know how much you know about the subject, but I can help you if needed :)

Currently canvas rendering uses an optimisation where pixels are represented as Uint32, and colours are passed in as 0xAABBGGRR, but this only works on little endian machines. On a big endian machine, the channels would be reversed.

The function should take in colours as an array [red, green, blue, alpha] and convert this internally into a Uint32 value (since setting full pixels at a time is much faster). This conversion must not be through bit-shifting, but through an array buffer, since this will ensure the byte order is system native.

It may be necessary to support the current format as well for backwards compatibility.

When I try to use this library in Vite, it says that global is not defined.

I think you need to compile the lib as both ESM and CommonJS.
then change your package.jsons exports field to point to both versions.

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c