QR Code Generation: qr-image vs qr.js vs qrcode

Generating QR codes is a common requirement for sharing URLs, payment info, or authentication tokens in web apps. While qr-image, qr.js, and qrcode all claim to solve this problem, they differ significantly in environment support, output formats, and maintenance status. Let's break down how they handle real-world engineering tasks.

🌍 Environment Support: Browser vs Node.js

qrcode works everywhere.

• It runs in Node.js servers and modern browsers.
• You can use the same package for backend generation and frontend display.

// qrcode: Works in Node and Browser
import QRCode from 'qrcode';

// Browser
QRCode.toCanvas(element, 'https://example.com');

// Node
QRCode.toDataURL('https://example.com');

qr-image is for Node.js only.

• It relies on Node buffers and streams.
• Using it in a browser bundle will cause build errors or runtime crashes.

// qr-image: Node.js only
var qr = require('qr-image');

// Generates a buffer
var img = qr.imageSync('https://example.com', { type: 'png' });

qr.js is primarily legacy Node or old browser scripts.

• It lacks modern module support (ESM).
• Often requires shims to work in modern build tools.

// qr.js: Legacy support
var QRCode = require('qr.js');

// Basic generation
var qr = QRCode.generate('https://example.com');

🖼️ Output Formats: Canvas, SVG, and Images

qrcode gives you multiple formats out of the box.

• You can request SVG strings, Canvas elements, or data URLs.
• No need to install extra libraries for different types.

// qrcode: Multiple formats
import QRCode from 'qrcode';

// SVG String
const svg = await QRCode.toString('text', { type: 'svg' });

// Canvas
await QRCode.toCanvas(canvasElement, 'text');

qr-image focuses on image buffers.

• It outputs PNG or SVG buffers specifically for server storage.
• Less flexible for direct DOM manipulation.

// qr-image: Image buffers
var qr = require('qr-image');

// PNG Buffer
var pngBuffer = qr.imageSync('text', { type: 'png' });

// SVG Buffer
var svgBuffer = qr.imageSync('text', { type: 'svg' });

qr.js has limited output options.

• Typically generates data matrices or basic strings.
• Requires manual work to convert to usable images.

// qr.js: Limited output
var QRCode = require('qr.js');

// Returns module data, not an image
var qrData = QRCode.generate('text');
// Developer must draw this manually

⚡ API Style: Async vs Sync

qrcode uses Promises for async operations.

• This prevents blocking the main thread in browsers.
• Fits naturally with modern async/await code.

// qrcode: Async/Await
try {
  const dataUrl = await QRCode.toDataURL('text');
  console.log(dataUrl);
} catch (err) {
  console.error(err);
}

qr-image offers synchronous methods.

• Good for simple scripts but can block Node event loops.
• No built-in Promise wrappers.

// qr-image: Synchronous
try {
  var buffer = qr.imageSync('text');
  // Write buffer to file
} catch (err) {
  console.error(err);
}

qr.js is synchronous and blocking.

• Can cause performance issues with large batches.
• No native async support.

// qr.js: Synchronous
var qr = QRCode.generate('text');
// Runs immediately on main thread

🛠️ Maintenance and Stability

qrcode is actively maintained.

• Regular updates fix security issues and add features.
• Safe for production use in enterprise apps.

// qrcode: Current standard
// npm install qrcode
// Regularly updated on npm registry

qr-image sees infrequent updates.

• Stable for basic use but not evolving.
• Risk of compatibility issues with new Node versions.

// qr-image: Legacy status
// npm install qr-image
// Last major updates were years ago

qr.js is effectively deprecated.

• No active development or security patches.
• Should not be used for new projects.

// qr.js: Deprecated
// npm install qr.js
// Considered obsolete by community standards

🌱 Real-World Scenarios

Scenario 1: React App Display

You need to show a QR code inside a React component.

• ✅ Best choice: qrcode
• Why? It renders directly to a Canvas element without server round-trips.

// qrcode in React
useEffect(() => {
  QRCode.toCanvas(canvasRef.current, url);
}, [url]);

Scenario 2: Node API Endpoint

Your backend needs to return a PNG file for download.

• ✅ Best choice: qr-image or qrcode
• Why? Both handle buffers well, but qrcode is safer long-term.

// qrcode in Express
app.get('/qr', async (req, res) => {
  const dataUrl = await QRCode.toDataURL(req.query.text);
  res.send(dataUrl);
});

Scenario 3: Static Site Generation

You are building static HTML files with embedded QR codes.

• ✅ Best choice: qrcode
• Why? It generates SVG strings you can inline directly into HTML.

// qrcode for SSG
const svg = await QRCode.toString(url, { type: 'svg' });
fs.writeFileSync('index.html', `<body>${svg}</body>`);

📌 Summary Table

💡 Final Recommendation

qrcode is the clear winner for modern development. It handles both server and client needs without forcing you to switch libraries. The async API keeps your app responsive, and the variety of output formats saves you from writing extra conversion code.

qr-image is acceptable if you are maintaining an older Node.js service that relies on buffer streams. However, for any new microservice or API, qrcode offers better future-proofing.

qr.js should be avoided. It lacks the features and support needed for professional applications. Migrating to qrcode is a small effort that removes significant technical debt.

Final Thought: Stick with qrcode for reliability. It is the standard tool that lets you focus on building features instead of fixing library issues.