Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
qrcode-svg-ts
Advanced tools
Readme
This library has been written to generate a SVG image of QR Code in Node.js, goals:
Install the package:
npm install qrcode-svg-ts --save
Inline example:
var QRCode = require("qrcode-svg-ts");
var svg = new QRCode("Hello World!").svg();
More options:
var qrcode = new QRCode({
content: "http://github.com/",
padding: 0,
width: 256,
height: 256,
color: "#000000",
background: "#ffffff",
ecl: "M",
});
var dataURL = qrcode.toDataURL()
qrcode.save("sample.svg").then(() => {
console.log('保存成功')
}).catch(console.err)
List of options:
0
modules by default, 0
for no border256
256
#000000
white
L
, M
, H
, Q
. default: H
path
element, recommended for web and responsive use, default: true
false
, see the output examples belowtrue
false
<?xml version="1.0" standalone="yes"?>
, default: true
svg
, see belowContainer options:
width
and height
attriute, recommended for converting to raster images or PDF where QR Code is being static (exact size)viewBox
attriute, recommended for responsive web pagesg
element, useful when you need to put multiple QR Codes in a single SVG documentThis mode is useful for designers to manipulate with particular squares. Thus, one can open the QR Code in an editor, select particular modules, move around, change color, etc. However, some old SVG viewers may generate minor gaps between the squares - the side effect when rendering an image at certain zoom level.
Default options
var qrcode = new QRCode({
content: "Pretty Fox",
join: false,
predefined: false
});
Output with rect
elements
<?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="16" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
<rect x="24" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
<rect x="32" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
...
</svg>
Squares joined into one path
shape produce a compact file size, i.e. 4-5x reduced compared with rect
elements.
A single path
element will result in an optimized rendering, thus not producing any minor gaps between the squares.
Also using the container with viewBox
attribute may contribute to the responsive scaling on the web.
Set join
to true
var qrcode = new QRCode({
content: "Pretty Fox",
join: true,
container: "svg-viewbox" //Useful but not required
});
Output with path
element
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
<rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
<path x="0" y="0" style="fill:blue;shape-rendering:crispEdges;" d="M35.31,35.31 V44.14 H44.14 V35.31 H35.31 Z..." />
</svg>
Algorithm defines the square pattern once before populating a canvas. Useful if you want to generate QR Code with candies.
However, some SVG software and converters do not support defs
or use
elements.
Set predefined
to true
var qrcode = new QRCode({
content: "Pretty Fox",
predefined: true
});
Output with defs
and use
elements
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
<defs><path id="qrmodule" d="M0 0 h8.827586206896552 v8.827586206896552 H0 z" style="fill:maroon;shape-rendering:crispEdges;" /></defs>
<rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
<use x="35.310344827586206" y="35.310344827586206" href="#qrmodule" />
<use x="44.13793103448276" y="35.310344827586206" href="#qrmodule" />
<use x="52.96551724137931" y="35.310344827586206" href="#qrmodule" />
<use x="61.79310344827586" y="35.310344827586206" href="#qrmodule" />
<use x="70.62068965517241" y="35.310344827586206" href="#qrmodule" />
...
</svg>
Using html-pdf to convert SVG to PDF (or PNG or JPEG)
var QRCode = require('qrcode-svg-ts');
var svg = new QRCode('hello').svg();
...
var pdf = require('html-pdf');
pdf.create(svg, { border: 0, type: 'pdf' }).toFile('output.pdf', function(err, res) {
...
});
QR Code in ASCII to output in a shell
var QRCode = require('qrcode-svg-ts');
var hello = new QRCode("Hello World!");
var modules = hello.qrcode.modules;
var ascii = '';
var length = modules.length;
for (var y = 0; y < length; y++) {
for (var x = 0; x < length; x++) {
var module = modules[x][y];
ascii += (module ? 'x' : ' ');
}
ascii += '\r\n';
}
console.log(ascii);
xxxxxxx xx x x xxxxxxx
x x xxxx x x x x
x xxx x xx xx x x xxx x
x xxx x xx x xxx x
x xxx x x x x x xxx x
x x x xx xx x x
xxxxxxx x x x x x xxxxxxx
xx xx
x x xx x x xx x x
x x xx x xx x xx x
x x xx x x x xx xx
x xx xxx xx x x x x x
xx xxxx xxxx x
x x x xx x xx xx x xx xx
x xx xxxx xxxx
xx xx x x x x xx x
xxxx xxxx xxxxxx x
x x x
xxxxxxx x xxx x x x x
x x xxx x xx x x
x xxx x xxxxxxxxxx
x xxx x xxxxxxxxx x xx
x xxx x xxx xx x x x
x x x x x
xxxxxxx xxx xxx x x x
Use on a HTML page with JavaScript
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="./dist/index.min.js"></script>
<script>
var qrcode = new QRCodeSVG({
content: "Hello World!",
container: "svg-viewbox", //Responsive use
join: true //Crisp rendering and 4-5x reduced file size
});
var svg = qrcode.svg();
document.getElementById("container").innerHTML = svg;
</script>
</body>
</html>
Thanks to davidshimjs for the base library.
Thanks to Kazuhiko Arase for the original QR Code in JavaScript algorithm.
Thanks to all contributors on the GitHub.
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
FAQs
A simple QR Code generator in pure JavaScript
The npm package qrcode-svg-ts receives a total of 67 weekly downloads. As such, qrcode-svg-ts popularity was classified as not popular.
We found that qrcode-svg-ts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.