TypeScript QR码生成器：qrcode库

TypeScript QR码生成器：qrcode库及其使用

QR码已成为现代Web和移动应用不可或缺的一部分。它们用于快速传输链接、联系人信息、文本、Wi-Fi密码等。在TypeScript和JavaScript生态系统中，有一个强大且易于使用的库qrcode，它允许在浏览器或服务器（Node.js）中直接生成QR码。本文将详细介绍如何安装、配置并使用该库在TypeScript中创建QR码。

什么是qrcode库？

qrcode库是一个流行的npm包，用JavaScript编写，与TypeScript完全兼容。它支持以多种格式生成QR码：数据字符串、SVG、Canvas（用于浏览器）或PNG图像（用于Node.js）。主要优势包括：

支持所有版本的QR码（从1到40）。
可配置的纠错级别（L、M、Q、H）。
既可在浏览器中运行，也可在Node.js环境中运行。
完全支持TypeScript——类型已包含在包中。
简单直观的API。

安装

首先，通过npm或yarn安装该包：

npm install qrcode

或

yarn add qrcode

如果您使用TypeScript，则无需额外安装类型——它们已内置于包中。

基本示例：以字符串形式生成QR码

获取QR码的最简单方法是将其生成为包含数据（例如URL）的字符串。为此，使用toString方法：

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

在此示例中，QR码以ASCII艺术形式输出到控制台。这便于调试或演示。

生成SVG格式的QR码（用于Web）

要将QR码嵌入网页，最好使用SVG格式——它可无损缩放，并可通过CSS轻松设置样式。

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // 将svgString插入DOM，例如通过innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

您也可以使用Promise代替回调：

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

生成Canvas格式的QR码（用于浏览器）

如果您需要将QR码嵌入到canvas元素中（例如，用于进一步处理或下载），请使用toCanvas方法：

import QRCode from 'qrcode';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('QR码已成功绘制到canvas上');});

参数width设置canvas的宽度（高度自动计算）。

生成PNG格式的QR码（用于Node.js）

对于服务器端生成（例如，将图像保存到磁盘），请使用toFile：

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('QR码已保存为qrcode.png');});

您还可以设置模块和背景的颜色、大小、级别