当前位置：首页 > news >正文

uqr实战教程：在Node.js和浏览器中生成带logo的个性化QR码

news 2026/8/4 20:37:12

uqr实战教程：在Node.js和浏览器中生成带logo的个性化QR码

【免费下载链接】uqrGenerate QR Code universally, in any runtime, to ANSI, Unicode or SVG.项目地址: https://gitcode.com/gh_mirrors/uq/uqr

uqr是一款功能强大的通用QR码生成工具，支持在任何运行时环境中生成ANSI、Unicode或SVG格式的QR码。本教程将带你快速掌握如何在Node.js和浏览器环境中使用uqr创建带有自定义logo的个性化QR码，让你的二维码既专业又富有品牌特色。

🚀 快速开始：环境准备与安装

一键安装步骤

首先确保你的系统已安装Node.js（建议v14+）和pnpm包管理器。通过以下命令克隆项目并安装依赖：

git clone https://gitcode.com/gh_mirrors/uq/uqr cd uqr pnpm install

核心模块概览

uqr的核心功能由以下关键文件实现：

src/qrcode.ts：QR码生成的核心逻辑，包含编码算法和错误校正实现
src/render.ts：提供多种渲染输出功能，支持ANSI、Unicode和SVG格式
src/svg.ts：SVG格式生成器，支持自定义样式和logo嵌入

💻 Node.js环境：生成基础QR码

最快配置方法

创建一个简单的Node.js脚本（例如play/run.ts），使用uqr生成基础QR码：

import { renderUnicode } from '../src/render' // 生成Unicode格式的QR码 const qrCode = renderUnicode('https://example.com', { version: 5, // QR码版本(1-40)，决定尺寸 errorCorrection: 'M', // 错误校正级别(L/M/Q/H) margin: 2 // 边距模块数 }) console.log(qrCode)

运行脚本：

ts-node play/run.ts

你将看到终端中输出一个使用Unicode字符绘制的QR码，这种格式非常适合在命令行工具中快速展示。

🎨 个性化定制：添加颜色与样式

uqr支持丰富的样式定制选项，让你的QR码脱颖而出：

import { renderSVG } from '../src/svg' const svg = renderSVG('https://example.com', { errorCorrection: 'Q', margin: 4, // 自定义颜色 color: { dark: '#2c3e50', // 深色模块颜色 light: '#ecf0f1' // 浅色模块颜色 }, // 自定义尺寸 size: 300 // 输出SVG宽度(像素) }) // 保存到文件 import fs from 'fs' fs.writeFileSync('custom-qr.svg', svg)

通过调整color配置，你可以轻松匹配品牌色调，创建具有视觉吸引力的QR码。

🏷️ 高级技巧：嵌入Logo图片

为QR码添加logo是提升品牌识别度的有效方式。以下是实现在SVG格式QR码中嵌入logo的方法：

import { renderSVG } from '../src/svg' const svg = renderSVG('https://example.com', { errorCorrection: 'H', // 建议使用高错误校正级别 margin: 4, size: 400, // logo配置 logo: { url: 'path/to/your-logo.png', // logo图片路径 size: 80, // logo尺寸(像素) margin: 8 // logo边距(像素) } }) fs.writeFileSync('qr-with-logo.svg', svg)

⚠️ 注意：添加logo会遮挡部分QR码区域，建议使用'H'级错误校正并控制logo尺寸不超过QR码总面积的15%，以确保扫描可靠性。

🌐 浏览器环境：前端集成方案

uqr同样支持在浏览器环境中直接生成QR码，无需后端参与：

浏览器端基础实现

<script type="module"> import { renderSVG } from './src/svg.js' // 获取DOM元素 const container = document.getElementById('qr-container') // 生成SVG并插入页面 const svg = renderSVG('https://example.com', { size: 256, errorCorrection: 'M' }) container.innerHTML = svg </script> <div id="qr-container"></div>

动态生成与下载

结合HTML5的下载功能，实现QR码的动态生成与保存：

// 在浏览器中生成并下载QR码 function downloadQRCode(text, filename) { const svg = renderSVG(text, { size: 300 }) const blob = new Blob([svg], { type: 'image/svg+xml' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = filename a.click() URL.revokeObjectURL(url) } // 使用示例 document.getElementById('generate-btn').addEventListener('click', () => { const text = document.getElementById('input-text').value downloadQRCode(text, 'my-qr-code.svg') })