fuqr

Deprecated: fuqr has been renamed to furious-qr. This package will not receive further updates. furious-qr 3.0.0 includes breaking changes; see the repository for details.

A small and hackable QR code generator

Install

pnpm add fuqr

Or simply copy src/fuqr.ts.

Usage

import { generate, renderCanvas, renderSvg } from "fuqr";

const qr = generate("https://github.com/zhengkyl/fuqr");

// as svg string
const svg = renderSvg(qr);

// with options
const svg = renderSvg(qr, {
  margin: 2,
  attributes: 'xmlns="http://www.w3.org/2000/svg" width="300px" height="300px"',
});

// OR

// as HTML canvas
const canvas = renderCanvas(qr);

// with options
const canvas = renderCanvas(qr, {
  margin: 2,
  scale: 10,
  canvas: document.createElement("canvas"),
});

// canvas supports "image/png" and "image/jpeg"
const url = canvas.toDataURL("image/png");
// or
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // etc
}, "image/png");

Advanced

For control over encoding mode, anything that implements Encoder can be used with generateWithEncoder(). For convenience, NumericEncoder, AlphanumericEncoder, and MixedEncoder (shortest mix of modes) are included in fuqr/extras/encoders. ByteMode, NumericMode, and AlphanumericMode provide each mode's header and bit lengths for custom encoders.

The third argument to the generate functions is a list of plugins. A Plugin defines hooks that run during the generating process. For now, the PixelArtPlugin and FittedLogoPlugin are included in the extras folder, but behavior is not yet stabilized.

Although everything is exported, only the generate and render prefixed functions are intended for general use. However, you may find some internal functions to be very helpful.

• buildSvgPath() and buildCanvasData() provide composable rendering logic.

• buildBlueprint() from fuqr/extras/blueprint can be used to find the block and bit index of every pixel.

• The visit helpers run a callback function with the coords of every pixel in a structural section. Looping through the data section, however, requires iterateMostlyDataModules() and manually skipping structural pixels.