做个二维码页面，扫一下就能打开链接

想把博客地址做成二维码印在名片上，搜了几个在线生成器，要么要注册、要么生成的码是"短链跳转"——扫完先跳到人家的服务器再跳过来，哪天它家服务停了二维码就不能用了。

其实自己做一个很简单，前端一个库就够了。这篇讲怎么做。

一、安装对应的qrcode库

前端生成二维码最常用的是 qrcode：

npm i qrcode

它既能在浏览器用，也能在 Node 里用。浏览器里最直接的用法是渲染到 canvas：

<canvas id="qr"></canvas>
<input id="text" placeholder="输入网址或文字">

import QRCode from 'qrcode'

const canvas = document.getElementById('qr')
const text = document.getElementById('text').value

QRCode.toCanvas(canvas, text, {
  width: 240,
  margin: 2,
}, function (error) {
  if (error) console.error(error)
  console.log('生成成功')
})

就这几行，二维码就出来了。

二、纠错等级怎么选

生成时可以指定纠错等级，这是二维码一个挺有意思的设计：它允许码被遮挡一部分，还能扫出来。

QRCode.toCanvas(canvas, text, {
  errorCorrectionLevel: 'M',   // L / M / Q / H
})

四个等级：

等级越高，纠错能力越强，但码也越密（同样内容需要更多的小方块）。

如果你要在二维码中间塞个 logo，一定要用 H 级——logo 会遮掉中间一块，低等级纠不回来。普通场景用 M 就行，不用纠结。

三、下载成图片

生成出来还得能保存。canvas 转图片 URL 再触发下载：

function download() {
  const canvas = document.getElementById('qr')
  const url = canvas.toDataURL('image/png')

  const a = document.createElement('a')
  a.href = url
  a.download = 'qrcode.png'
  a.click()
}

toDataURL 把 canvas 内容转成一个 base64 的图片地址，a.download 指定文件名，模拟点击就下载了。

想让图片更清晰可以生成得大一点，比如 width: 600，显示时用 CSS 缩小到 240，这样在高分屏和打印时都清楚。

四、内容越多，码越密

这是二维码的物理限制：同一个纠错等级下，内容越长，需要的小方块就越多，每个方块就越小，越难扫。

实测大致感受：

• 一个短网址（20 来个字符）：非常稀疏，手机离远点也能扫。
• 一段中文（几十个字）：明显变密。
• 几百字的文章：码密到手机上很难识别。

所以：

• 别拿二维码装长文本。它适合放网址、短标识、Wi-Fi 配置这类短内容。
• 中文比英文"占地方"。因为中文 UTF-8 编码后一个字 3 个字节，二维码存的是字节。同样的字数，中文码更密。
• 长网址先转短链。但如果你用了第三方短链，就等于把命交给别人了（这正是我自己做这个页面的原因）。

五、颜色可以改，但要有对比度

默认是黑白，可以改：

QRCode.toCanvas(canvas, text, {
  color: {
    dark: '#1f2733',    // 深色块
    light: '#ffffff',   // 浅色底
  },
})

想做成彩色的也行，但有个硬约束：深浅两色的对比度必须足够大。

扫码软件是先把图像二值化（分成黑和白）再识别的。如果你用浅灰配白底、或者用红色块配蓝底，对比度不够，扫出来就是一片糊。

几个经验：

• 深色块用深灰或纯黑，别用亮色（红、黄、浅蓝）。
• 底色保持白色或很浅的颜色。
• 想用品牌色，就用深色的品牌色（比如深蓝 #1a3a6b），别用亮色。
• 改完一定用不同手机、不同 App 试扫几次，别只看生成出来好看。

六、几个边界情况

输入为空要有提示。 不判断的话生成的码是空的，也不报错，用户一脸茫然：

if (!text.trim()) {
  alert('请输入内容')
  return
}

超长内容要给警告。 qrcode 库对超长内容会直接报错，可以提前提示：

try {
  await QRCode.toCanvas(canvas, text, options)
} catch (e) {
  alert('内容太长了，二维码放不下')
}

边距不能为 0。 二维码四周需要留白（叫"静区"），扫码软件靠它定位。设 margin: 0 的话有些手机扫不出来。默认 margin: 4，我一般设 2 到 4。

尺寸别太小。 显示成 100×100 的话，码太密的地方会糊在一起。建议显示尺寸不小于 200px。

小结

自己做个二维码页面真的没什么技术含量——引个 qrcode 库，调 toCanvas 就完事了。值得花心思的是那几个实际限制：内容别太长（中文尤其占地方）、改颜色要保证对比度、边距别设 0、中间放 logo 就得用 H 级纠错。另外那个"别人的短链会失效"的问题，也是我宁可自己写几十行代码的原因——自己生成的码扫完直接跳目标地址，中间不经过任何人的服务器，永远不会因为第三方停服而失效。