@tybys/qrcodegen NPM

qrcodegen

WebAssembly version of nayuki/QR-Code-generator.

Build with wasi-sdk for small size instead of Emscripten.

Support browser and WeChat mini program.

Usage

npm install @tybys/qrcodegen

HTML script tag

<!DOCTYPE html>
<html>
<head>
  <title>qrcodegen</title>
</head>
<body>
  <canvas width="200" height="200" id="canvas"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/@tybys/qrcodegen/dist/qrcodegen.min.js"></script>
  <script>
  /// <reference path="./node_modules/@tybys/qrcodegen/dist/qrcodegen.d.ts" />

  qrcodegen.init().then(function (api) {
    var matrix = api.encodeText('Hello world!', qrcodegen.Ecc.LOW);

    /** @type {HTMLCanvasElement} */
    var canvas = document.getElementById('canvas');

    qrcodegen.drawCanvas(canvas, matrix, {
      // foregroundColor: '#000000',
      // backgroundColor: '#ffffff',
      // padding: 0
    });
  });
  </script>
</body>
</html>

Webpack

import { init, drawCanvas, Ecc } from '@tybys/qrcodegen'

init().then(function (api) {
  var matrix = api.encodeText('Hello world!', Ecc.LOW)

  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById('canvas')

  drawCanvas(canvas, matrix, {
    // foregroundColor: '#000000',
    // backgroundColor: '#ffffff',
    // padding: 0
  })
})

WeChat mini program

<canvas type="2d" id="canvas" style="width: 750rpx; height: 750rpx"></canvas>

const { init, drawCanvas, Ecc } = require('@tybys/qrcodegen')

const dpr = wx.getSystemInfoSync().pixelRatio
const scale = wx.getSystemInfoSync().screenWidth / 375

function getCanvas (id) {
  return new Promise(resolve => {
    const query = wx.createSelectorQuery()
    query.select(id)
      .fields({ node: true, size: true })
      .exec((res) => {
        resolve(res[0].node)
      })
  })
}

Page({
  onReady () {
    Promise.all([
      getCanvas('#canvas'),
      init()
    ]).then(([canvas, api]) => {
      canvas.width = 375 * scale * dpr
      canvas.height = 375 * scale * dpr

      const matrix = api.encodeText('Hello world!', Ecc.LOW)
      drawCanvas(canvas, matrix, {
        // foregroundColor: '#000000',
        // backgroundColor: '#ffffff',
        // padding: 0
      })
    })
  }
})

Building

Install wasi-sdk ($WASI_SDK_PATH) and binaryen

npm install --ignore-scripts
npm run build:wasm
npm run build

@tybys/wasm-util

@infinitebrahmanuniverse/nolb-_tyb @everything-registry/sub-chunk-943 @zalastax/nolb-_tyb

1 year ago

1 year ago

1 year ago

1 year ago