Skip to content

Latest commit

 

History

History
120 lines (103 loc) · 3.54 KB

README.md

File metadata and controls

120 lines (103 loc) · 3.54 KB
Raw

Npm Package Build Status Npm Downloads

pure-svg-code

Generate qrcode and barcode

Feature

  • SVG: can be used in any client support render svg like browser & 小程序 & Node.js;
  • Small: write in pure javascript, no dependency;
  • Typescript: support Typescript;

Install

Install from npm:

npm i pure-svg-code

Import it:

// import both
const {barcode,qrcode,svg2url} = require('pure-svg-code');

// import as you need
const barcode = require('pure-svg-code/barcode');
const qrcode = require('pure-svg-code/qrcode');
const svg2url = require('pure-svg-code/svg2url');

File size:

  • qrcode: minified 17Kb, Gzip 5.7Kb
  • barcode: minified 19Kb, Gzip 6.2Kb

qrcode

const svgString = qrcode({
  content: "http://github.com/",
  padding: 4,
  width: 256,
  height: 256,
  color: "#000000",
  background: "#ffffff",
  ecl: "M"    
})

Output svg content:

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
<rect x="0" y="0" width="256" height="256" style="fill:#ffffff;shape-rendering:crispEdges;"/>
<rect x="35.310344827586206" y="35.310344827586206" width="8.827586206896552" height="8.827586206896552" style="fill:#000000;shape-rendering:crispEdges;"/>
<rect x="44.13793103448276" y="35.310344827586206" width="8.827586206896552" height="8.827586206896552" style="fill:#000000;shape-rendering:crispEdges;"/>
...
</svg>

List of options:

  • content - QR Code content, required
  • padding - white space padding, 4 modules by default, 0 for no border
  • width - QR Code width in pixels
  • height - QR Code height in pixels
  • color - color of modules, color name or hex string, e.g. #000000
  • background - color of background, color name or hex string, e.g. white
  • ecl - error correction level: L, M, H, Q

barcode

Set it up and specify your type and options. The following 3 are the only required ones.

var svgString = barcode("9234567890128", "ean13", {width:'50', barWidth:1, barHeight:50});

Output svg content:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 50" >
  <rect width="2.0" height="50" x="0.0" y="0"/>
  <rect width="3.9" height="50" x="3.9" y="0"/>
  ...
</svg>

Support types:

  • codabar
  • code11 (code 11)
  • code39 (code 39)
  • code93 (code 93)
  • code128 (code 128)
  • ean8 (ean 8)
  • ean13 (ean 13)
  • std25 (standard 2 of 5 - industrial 2 of 5)
  • int25 (interleaved 2 of 5)

Support options:

  • barHeight height of svg (default: 30);
  • width width of svg (default: 100);
  • bgColor background color css like (default: 'transparent');
  • color barcode color (default: '#000000');
  • showHRI: should show text under bar;

Use it with <img/> tag

const {qrcode,svg2url} = require('pure-svg-code');
const svgString = qrcode('data');
const url = svg2url(svgString);

// set img element's src to url
imgEle.src = url;

This way can be used for browser & 小程序 or any client can render svg.

Use it in Node.js server

const {qrcode} = require('pure-svg-code');

app.get('/',function(req, res) {
    const svgString = qrcode('data');
    res.send(svgString)
})