liaozhongwu/design-qrcode

design your qrcode, works in browser and node.

Design QRCode

design your qrcode, works in browser and node.

Install

npm install design-qrcode

script

<!-- copy node_modules/design-qrcode/dist/broswer.bundle.js to your_path -->
<script type="text/javascript" src=`${your_path_to_broswer.bundle.js}`></script>

Usage

Class: QRCodeMaker

import { QRCodeMaker } from 'design-qrcode'

const qrcode = QRCodeMaker('https://npmjs.com/package/design-qrcode');
  
const qrcode_bg = QRCodeMaker({
  content: 'https://npmjs.com/package/design-qrcode',
  background: 'path_to_your_image' || your_image_element,
});

const qrcode_size = new QRCodeMaker({
  content: 'https://npmjs.com/package/design-qrcode',
  width: 320,
  background: {
    image: 'path_to_your_image',
    width: 320,
    height: 320,
  },
});

const qrcode_type = new QRCodeMaker({
  content: 'https://npmjs.com/package/design-qrcode',
  width: 320,
  type: 'image/jpeg',
  background: {
    image: 'path_to_your_image',
    width: 480,
    height: 480,
    x: 80,
    y: 80,
  },
});

const qrcode_comment = new QRCodeMaker({
  content: 'https://npmjs.com/package/design-qrcode',
  width: 320,
  type: 'image/jpeg',
  background: {
    image: 'path_to_your_image',
    width: 480,
    height: 480,
    x: 80,
    y: 80,
  },
  comment: {
    text: 'abcdef',
    font: '28px Arial',
    color: 'red',
    align: 'center',
    x: 240,
    y: 420,
  },
});

toImage

import { QRCodeMaker, toImage } from 'design-qrcode';

const options = your_qrcode_options;

async () => {
  const image = await toImage(options);
  // same as
  const qrcode = new QRCodeMaker(options);
  const image = await qrcode.toImage();
  
  // Broswer TEST
  // instanceof HTMLImageElement
  document.body.appendChild(image);

  // Node TEST
  // instanceof Buffer
  const fs = require('fs');
  fs.writeFileSync('./qrcode.png', image);
}

toDataURL

import { QRCodeMaker, toDataURL } from 'design-qrcode';

const options = your_qrcode_options;

async () => {
  const dataURL = await toDataURL(options);
  // same as
  const qrcode = new QRCodeMaker(options);
  const dataURL = await qrcode.toDataURL();
  
  // Broswer TEST
  const img = document.createElement('img');
  img.src = data;
  document.body.appendChild(img);

  // Node TEST
  resp.send(dataURL);
}

API

Param	Type	Default	Description
options	string | object
options.content	string
[options.width]	number
[options.type]	"image/png" | "image/jpeg" | "image/webp"	"image/png"
[options.quality]	number
[options.background]	string | object
options.background.image	string | HTMLImageElement
[options.background.width]	number
[options.background.height]	number
[options.background.x]	number
[options.background.y]	number
[options.comment]	string | object
options.comment.text	string
[options.comment.color]	string	'#000000'
[options.comment.font]	string	'16px Arial'
[options.comment.align]	string	'center'
[options.comment.x]	number
[options.comment.y]	number