JavaScript生成二维码及文本转图片教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript生成二维码方法及文本转图片教程》，聊聊，希望可以帮助到正在努力赚钱的你。

JavaScript 生成二维码首选 qrcode.js 库，支持 Canvas 渲染与 base64 图片导出；可自定义颜色、嵌入 logo（尺寸≤20%），并兼容中文及 UTF-8 内容，长文本需启用高纠错等级或 URL 编码。

用 JavaScript 生成二维码图片，核心是调用一个轻量、可靠的二维码生成库，把文本内容编码为可视的黑白矩阵图像。最常用且维护活跃的是 qrcode.js（由 node-qrcode 的浏览器适配版本演化而来），它支持直接在 Canvas 或 DOM 中渲染，无需后端参与。

使用 qrcode.js 快速生成 Canvas 二维码

这是最简单直接的方式，适合网页内即时展示：

• 通过 CDN 引入库：
• 创建一个 元素，并指定其 id（如 id="qrcode"）
• 调用 QRCode.toCanvas() 方法，传入 canvas 对象、要编码的文本和可选配置（如大小、纠错等级）

示例代码：

const canvas = document.getElementById('qrcode');
QRCode.toCanvas(canvas, 'https://example.com', { width: 200, errorCorrectionLevel: 'M' }, (error) => {
  if (error) console.error('生成失败：', error);
});

生成 base64 图片 URL 用于 img 标签或下载

如果需要将二维码作为图片嵌入 、上传、或提供下载，应获取 base64 编码的 PNG 数据：

• 使用 QRCode.toDataURL()，返回 Promise，解析后得到 data URL 字符串
• 可直接赋值给 img.src，或创建 a 标签配合 download 属性触发保存

示例：

QRCode.toDataURL('Hello World', { type: 'image/png', width: 256 })
  .then(url => {
    document.getElementById('myImg').src = url;
    // 或：触发下载
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = url;
    link.click();
  });

自定义样式：添加 Logo 或修改颜色（需手动绘制）

基础 qrcode.js 默认只输出黑白模块。若需嵌入 logo 或更换前景/背景色，需先生成 canvas，再用 2D Context 手动覆盖：

• 调用 toCanvas() 得到 canvas 后，用 getContext('2d') 获取绘图上下文
• 遍历 canvas 像素，将黑色模块替换为指定颜色（如深蓝），白色模块设为浅灰
• 用 drawImage() 在中心叠加小尺寸 logo 图片（注意缩放与裁剪，避免遮挡关键定位图案）

注意：logo 尺寸建议不超过二维码边长的 20%，否则可能影响扫码识别率。

处理中文、特殊字符与长文本

qrcode.js 默认支持 UTF-8，中文可直接传入，但要注意：

• 长 URL 或含大量参数的字符串可能导致二维码过于密集，降低容错性；建议启用 errorCorrectionLevel: 'H'（最高纠错）
• 若内容超长导致生成失败（Invalid data），可先用 encodeURIComponent() 对 URL 参数编码，或考虑缩短链接服务
• 非标准字符（如 emoji）部分扫码器兼容性较差，生产环境建议避免使用

以上就是《JavaScript生成二维码及文本转图片教程》的详细内容，更多关于的资料请关注golang学习网公众号！