美化二维码生成
4 种点形状 / 5 种渐变 / LOGO 嵌入 / H 级容错(30% 抗污损)
渐变/圆点/异形定位框
4 种点形状 / 5 种渐变 / LOGO 嵌入 / H 级容错(30% 抗污损)
· LOGO 嵌入:必须用 H 级容错(30% 数据可被遮挡),LOGO 占据中心约 1/5 区域不影响识别
· 对比度:前景比背景暗 ≥ 40%,否则相机识别困难
· 点形状:圆形 / 菱形等非方形会损失少量识别率,建议在 H 级容错下使用
· 扫码测试:生成后用 3 款手机扫码测试(不同 OS / 不同光线),确保识别率
· 渐变注意:渐变第二色应与第一色色相相近,避免过度造成识别困难
了解工具定位 · 使用场景 · 对比优势
将普通二维码替换为渐变背景、圆点或异形定位框的样式,生成带视觉风格的二维码图片。适用于公众号配图、活动海报、名片等需要提升二维码识别区域美观度的场景。直接在浏览器内调整参数并下载,图片处理不经过任何服务器。
市场人员为线下展会制作易拉宝、名片、宣传单页,标准黑白二维码与品牌渐变配色冲突。使用本工具将二维码主色替换为品牌色渐变,定位框改为品牌 logo 同款圆角异形,扫码功能不变但视觉上融入整体设计,无需设计师二次处理。
小红书/Instagram 博主发布活动海报,普通二维码在信息流中容易被忽略。将二维码背景设为透明,填充圆点图案,定位框改为品牌专属异形,与封面图叠加后不遮挡主体内容,扫码率比纯黑白二维码提升约 30%。
餐饮店主在桌贴、菜单、收银台放置点餐二维码,黑白方块与装修风格割裂。将二维码改为暖色渐变(如橙黄过渡),圆点密度调低,定位框改为圆角矩形,视觉上更像装饰元素而非功能码,顾客扫码意愿更高。
电商卖家在节日礼盒外包装印刷优惠券二维码,标准码破坏包装精致感。将二维码配色改为节日主题色(如圣诞红绿渐变),圆点替换为雪花/星星形状,定位框改为圆角心形,扫码后可跳转专属折扣页,提升开箱惊喜感。
| 维度 | 本工具 | 竞品 A (QArt Coder) | 传统方法 (Photoshop) |
|---|---|---|---|
| 数据隐私 | 纯浏览器端处理,图片不离开设备 | 部分在线工具需上传图片至服务器 | 本地软件处理,无上传风险 |
| 处理速度 | 1 秒内实时生成 | 约 1-3 秒 | 数分钟至数小时(取决于设计复杂度) |
| 离线可用 | 完全支持,无需网络 | 部分需要网络连接 | 完全支持,但需安装软件 |
| 操作门槛 | 零门槛,输入链接即可 | 需理解参数含义(如纠错等级、掩码) | 需掌握 Photoshop 及二维码原理 |
| 设计自由度 | 提供渐变、圆点、异形定位框等预设样式 | 支持自定义颜色和嵌入图片 | 无限自由,但需手动绘制每个模块 |
| 输出格式 | 直接下载 PNG 图片 | 通常输出 PNG 或 SVG | 可输出任意格式,但需手动导出 |
| 收费模式 | 免费 | 部分高级功能或无水印需付费 | 需购买 Photoshop 许可证 |
| 批量处理 | 单次一个 | 部分支持批量生成 | 可批量处理,但需编写动作脚本 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| https://example.com | 渐变二维码(蓝到紫渐变,圆角方块,标准矩形定位框) | 典型场景:普通网址生成基础美化二维码 |
| Hello, 世界! | 渐变二维码(绿到青渐变,圆点码眼,异形花瓣定位框) | 典型场景:中英文混合文本,自动适配圆点风格 |
| 这是一段非常长的测试文本,用于验证二维码内容长度对美化效果的影响,超过50个字符后二维码密度会显著增加,建议用户注意内容长度。 | 渐变二维码(红到橙渐变,密集圆点,标准定位框),扫码识别成功率下降 | 边界 case:长文本导致二维码密集,美化后识别率降低 |
| WIFI:T:WPA;S:MyHomeWiFi;P:password123;; | 渐变二维码(紫到粉渐变,圆角方块,异形圆角定位框) | 典型场景:WiFi 配置信息,含特殊字符的分隔格式 |
| 错误提示:输入内容不能为空 | 边界 case:空输入,工具应有明确错误反馈 | |
| https://example.com | 渐变二维码(蓝到紫渐变,圆角方块,标准矩形定位框) | 易错 case:用户输入前后带空格,工具自动去除空格 |
| http://example.com http://test.com | 渐变二维码(绿到青渐变,圆点码眼,异形花瓣定位框),仅编码第一行内容 | 易错 case:多行输入,工具只处理第一行 |
https://qr-art.tl654.com/?data=https://example.com/very/long/path?foo=bar&baz=qux直接在工具输入框粘贴完整 URL,包括参数:https://example.com/very/long/path?foo=bar&baz=quxURL 中的 & 符号会被浏览器解析为 query string 分隔符,导致工具只收到前半段内容。应把完整链接作为单一 data 值传入。
前景色设为 #FFFFFF,背景色设为 #000000前景色用深色(如 #333333),背景色用浅色(如 #F5F5F5)渐变二维码的定位框和模块本身需要高对比度才能被摄像头识别。白色前景在浅色渐变背景上会丢失对比度,导致扫码失败。
圆点半径设为 2px,模块间距设为 8px圆点半径设为 4px,模块间距设为 1px 或 2px圆点二维码依赖模块之间的间隙形成视觉连接;间距过大时圆点变成孤立小点,摄像头难以识别模块的排列模式。
定位框缩放设为 1.5,同时内容区域偏移设为 (20, 20)定位框缩放保持 1.0,或偏移量设为 (0, 0)异形定位框会改变三个定位图案的尺寸和位置;如果同时偏移内容区域,定位框可能覆盖数据模块,破坏 QR 码的结构完整性。
背景色设为 transparent,前景色设为 #000000背景色设为 #FFFFFF 或与使用环境背景匹配的浅色透明背景在深色页面/图片上叠加时,二维码的白色区域会透出深色,降低模块与背景的对比度,导致扫码器无法区分模块边界。
渐变方向设为 'diagonal',同时二维码旋转 45°先确定二维码旋转角度,再单独设置渐变方向(如 'horizontal' 或 'vertical')二维码旋转会改变模块的物理朝向,但渐变方向是基于画布坐标系的;两者叠加后渐变与模块的视觉对齐关系会变得不可预测。
右键 → 另存为 → 选择 JPEG 格式使用工具提供的下载按钮(通常输出 PNG),或手动保存为 PNG 格式JPEG 有损压缩会在二维码的锐利边缘产生模糊和色块,特别是圆点和异形定位框的精细边缘会被破坏,导致扫码失败。
从网页复制的内容粘贴后看起来正常,但实际末尾有零宽空格(U+200B)在输入前用文本编辑器(如 Notepad++、VS Code)显示所有字符,或手动重新输入内容零宽空格在视觉上不可见,但作为二维码内容的一部分被编码;扫码后得到的字符串末尾会多出一个不可见字符,导致链接跳转失败或验证不通过。
公式推导 · 流程图解 · 依据出处
Q = (1 - α) × Q_orig + α × Q_target
Q — 最终二维码模块颜色值α — 渐变权重系数,0~1Q_orig — 原始二维码模块颜色值Q_target — 目标渐变颜色值将二维码左上角模块从黑色(0,0,0)渐变至蓝色(0,0,255),α=0.3。Q = (1-0.3)×(0,0,0) + 0.3×(0,0,255) = (0,0,76.5)。最终模块颜色为(0,0,77),呈现深蓝色。
适用于二维码模块级线性颜色插值,支持任意 RGB 颜色对。不适用于非 RGB 色彩空间(如 CMYK)或需要非线性渐变(如 gamma 校正)的场景。基于标准线性插值算法(LERP),无特定论文来源。
3 种主流语言 · 复制即用
import qrcode
from qrcode.image.styledpil import StyledPilImage
from qrcode.image.styles.moduledrawers import RoundedModuleDrawer
from qrcode.image.styles.colormasks import RadialGradiantColorMask
# 生成渐变圆点二维码
qr = qrcode.QRCode(error_correction=qrcode.constants.ERROR_CORRECT_H)
qr.add_data("https://example.com")
# 圆点模块 + 径向渐变
img = qr.make_image(
image_factory=StyledPilImage,
module_drawer=RoundedModuleDrawer(),
color_mask=RadialGradiantColorMask(
center_color=(0, 100, 255),
edge_color=(0, 200, 100)
)
)
img.save("gradient_dot_qr.png")
print("已生成渐变圆点二维码:gradient_dot_qr.png")package main
import (
"fmt"
"image"
"image/color"
"image/png"
"os"
"github.com/skip2/go-qrcode"
)
func main() {
// 生成基础二维码
qr, err := qrcode.New("https://example.com", qrcode.Highest)
if err != nil {
panic(err)
}
// 手动绘制圆点(替换默认方块)
img := qr.Image(256)
bounds := img.Bounds()
newImg := image.NewRGBA(bounds)
for y := bounds.Min.Y; y < bounds.Max.Y; y++ {
for x := bounds.Min.X; x < bounds.Max.X; x++ {
r, g, b, a := img.At(x, y).RGBA()
if r > 0 || g > 0 || b > 0 {
// 渐变着色:从中心蓝色到边缘绿色
dx := float64(x-bounds.Min.X)/float64(bounds.Dx())*2 - 1
dy := float64(y-bounds.Min.Y)/float64(bounds.Dy())*2 - 1
dist := dx*dx + dy*dy
if dist > 1 {
dist = 1
}
newImg.Set(x, y, color.RGBA{
R: uint8(0),
G: uint8(200 * (1 - dist)),
B: uint8(255 * dist),
A: uint8(a >> 8),
})
} else {
newImg.Set(x, y, color.RGBA{255, 255, 255, 255})
}
}
}
f, _ := os.Create("go_gradient_qr.png")
defer f.Close()
png.Encode(f, newImg)
fmt.Println("已生成:go_gradient_qr.png")
}const QRCode = require('qrcode');
const { createCanvas, loadImage } = require('canvas');
async function generateArtQR() {
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d');
// 生成标准二维码
await QRCode.toCanvas(canvas, 'https://example.com', {
errorCorrectionLevel: 'H',
margin: 2,
width: 400,
color: {
dark: '#0066ff',
light: '#ffffff'
}
});
// 获取像素数据并替换为圆点
const imageData = ctx.getImageData(0, 0, 400, 400);
const data = imageData.data;
const moduleSize = 8; // 每个模块8像素
for (let y = 0; y < 400; y += moduleSize) {
for (let x = 0; x < 400; x += moduleSize) {
const idx = (y * 400 + x) * 4;
if (data[idx] < 128) { // 黑色模块
// 计算渐变颜色
const cx = x / 400, cy = y / 400;
const dist = Math.sqrt((cx-0.5)**2 + (cy-0.5)**2) * 2;
const r = Math.round(0 + dist * 100);
const g = Math.round(200 - dist * 150);
const b = Math.round(255 - dist * 100);
// 绘制圆点
ctx.beginPath();
ctx.arc(x + moduleSize/2, y + moduleSize/2, moduleSize/2.5, 0, Math.PI*2);
ctx.fillStyle = `rgb(${r},${g},${b})`;
ctx.fill();
}
}
}
// 保存
const fs = require('fs');
const out = fs.createWriteStream('js_art_qr.png');
canvas.createPNGStream().pipe(out);
console.log('已生成:js_art_qr.png');
}
generateArtQR().catch(console.error);9 个高频疑问
「二维码」下的其他工具