二维码条码 · 二维码

美化二维码

渐变/圆点/异形定位框

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 64 次使用
Artistic QR · 背景融合 / 国风渐变 / 可扫自检
国 风 预 设One-tap · 赤金大刊配色
背 景 融 合Image Fusion · 核心
上传后码点自动缩小留白让画面透出,三定位眼完整保留
艺 术 风 格Module Style
定 位 眼Finder Eyes
前 景 配 色Palette · 中国传统色
中 心 徽 标Logo · 建议容错 H
容 错 级Error Correction · 美化必配高容错
艺术美化会牺牲一部分识别冗余,强烈建议保持 H 级,叠背景图时尤甚。
就绪 · 美化后自动做本机扫码自检,通过即盖「验」印
最近方案下载或复制时自动留档 · 仅存本机 · 不含图片
第一节

关于本工具

About

海报或社交媒体上的二维码,常因黑白方块与背景格格不入而降低扫码意愿。这个工具让定位框变成圆角、圆点或异形图案,同时保持内容区可被正常识别。所有样式调整在浏览器本地完成,图片不会上传到服务器,适合品牌物料设计或活动海报制作。

使用场景

品牌物料统一调性

市场部小王在制作一批新品宣传海报,总部要求所有二维码必须使用品牌色渐变,且定位框需替换为品牌IP形象的圆角轮廓。以往用代码改二维码样式需要前端介入,沟通成本高。本工具内置渐变编辑器与异形定位框库,小王直接在色板中取用品牌色,上传IP轮廓SVG文件,5分钟内批量生成了符合VI规范的二维码。

咖啡店扫码点餐引流

社区咖啡店老板老张想在门口易拉宝上放点餐码,但传统黑白二维码与店铺暖色调装修格格不入。他用本工具将二维码改为暖橙渐变,定位框替换成咖啡豆轮廓的异形图案。顾客在2米外就能被吸引扫码,点餐转化率比之前贴的普通二维码高出约30%,且扫码后直接跳转微信小程序,无需额外关注公众号。

设计师作品集水印保护

自由设计师小林在个人网站上展示作品集,担心高清图被直接下载盗用。她将每个作品对应的加密预览链接生成二维码,并设计成与作品风格一致的渐变圆点样式。访客必须扫码才能查看原图,二维码本身也成为设计元素之一。本工具生成的二维码纠错等级高,即使被网站压缩或部分遮挡,仍能顺利扫码跳转。

线下活动签到核销码

活动运营小陈负责一场300人行业沙龙,每个报名者会收到一个含签到码的邮件。为提升现场辨识度,她用本工具将签到码设计成活动主题色的渐变圆点二维码,并嵌入活动Logo作为中心图案。现场志愿者手持扫码枪在1米外即可快速识别,签到速度比普通黑白码提升约40%,且降低了因光线不足导致的识别失败率。

个人名片信息整合

销售经理阿强参加行业展会,不想同时递纸质名片和电子名片。他使用本工具将个人微信二维码、公司官网链接、电子名片(含电话邮箱)三个信息编码进同一个二维码,并设置成商务蓝渐变与矩形圆角定位框。客户扫码后可在三个选项中选择跳转,既保留了纸质名片的仪式感,又实现了信息数字化展示。

第二节

使用指南

Getting Started

使用步骤

  1. 1在二维码内容输入框中粘贴网址或文本,下方画布实时生成基础二维码
  2. 2点击「渐变」标签,选起始色与终止色,二维码色块自动过渡为渐变色
  3. 3切换至「圆点」样式,二维码的方块模块变为圆角点阵,边角更柔和
  4. 4勾选「异形定位框」,左上、右上、左下三个定位图案替换为自定义图形
  5. 5调整滑块控制圆角半径或渐变角度,画布同步更新,满意后右键保存图片

输入输出示例

输入输出说明
https://www.quanbao5.com(默认样式)二维码:渐变蓝紫配色,圆角模块,定位框为圆角方形常规:验证基础URL生成,渐变配色和圆角模块的默认效果
https://www.quanbao5.com(圆点样式)二维码:渐变蓝紫配色,圆点模块,定位框为圆角方形常规:圆点样式下模块变为圆形,验证样式切换对二维码结构的影响
https://www.quanbao5.com(异形定位框)二维码:渐变蓝紫配色,圆角模块,定位框为异形(如三角形/星形)常规:异形定位框改变二维码的视觉重心,验证定位框变形后扫描兼容性
(空输入)无输出,提示「请输入内容」边界:空输入应触发前端校验,防止生成无内容二维码
https://www.quanbao5.com/erweima/qr-art?param=中文&emoji=😊二维码:渐变蓝紫配色,圆角模块,定位框为圆角方形;内容含中文和emoji边界:URL含中文和emoji,验证工具是否支持UTF-8编码及特殊字符
https://www.quanbao5.com?long=verylong...(超过2000字符的URL)二维码:渐变蓝紫配色,圆角模块,定位框为圆角方形;二维码密度极高边界:超长URL导致二维码模块密集,验证工具对高密度数据的处理能力
BEGIN:VCARD VERSION:3.0 FN:张三 TEL:13800138000 END:VCARD二维码:渐变蓝紫配色,圆角模块,定位框为圆角方形;内容为vCard格式易错:非URL文本内容,用户常误以为工具只支持网址,实际支持纯文本
https://www.quanbao5.com(纯黑配色,无渐变)二维码:纯黑配色,圆角模块,定位框为圆角方形易错:渐变配色选项关闭后,验证工具是否保留基础黑白兼容性

常见错误对照

1.二维码内容包含中文但未指定 UTF-8 编码

✗ 错误直接输入中文文本,如「你好世界」
✓ 修复在工具输入框粘贴中文内容,工具默认 UTF-8 编码,无需额外操作

二维码标准支持 UTF-8 编码,但部分旧版扫码器默认按 GBK 解码中文。工具已自动处理编码,用户无需手动转换。

2.渐变颜色对比度不足导致扫码失败

✗ 错误前景色用浅蓝 #87CEEB,背景色用白色 #FFFFFF
✓ 修复前景色用深蓝 #000080,背景色用白色 #FFFFFF

扫码器依赖深色与浅色区域的高对比度。浅色前景 + 浅色背景使模块边界模糊,导致解码失败。建议前景色亮度 < 30%,背景色亮度 > 70%。

3.异形定位框破坏了三个定位图案的完整形状

✗ 错误将定位框改为星形,且星形尖角切断了回字形外框
✓ 修复保持定位框外轮廓为正方形,内部填充自定义图案

QR 码的定位图案(三个角)必须保留完整的 7×7 模块结构,否则扫码器无法检测位置。异形改造只能装饰内部模块,不能改变外轮廓。

4.圆点半径过大,导致模块间粘连

✗ 错误圆点半径设为 80%(模块尺寸的 80%)
✓ 修复圆点半径设为 50%(模块尺寸的 50%)

圆点半径超过模块间距的一半时,相邻模块会重叠,形成连续色块,破坏二维码的二进制编码。标准 QR 码要求模块间有明确间隔。

5.在内容中混入了不可见控制字符

✗ 错误从 Word 复制文本,包含回车符和制表符
✓ 修复先粘贴到纯文本编辑器(如记事本),再复制纯文本到工具输入框

控制字符(U+0000–U+001F)会被编码进二维码,但多数扫码器无法正确渲染,导致扫描结果出现乱码或空白。

6.内容过长但未选择高纠错等级

✗ 错误输入 200 个字符,纠错等级选 L(7% 恢复能力)
✓ 修复输入 200 个字符,纠错等级选 H(30% 恢复能力)

QR 码容量与纠错等级成反比。长内容 + 低纠错等级会使模块密度极高,打印或显示稍有污损即无法解码。高纠错等级虽减少容量,但提升容错性。

7.渐变方向与二维码模块排列方向冲突

✗ 错误水平渐变 + 二维码模块水平排列,导致同色模块连成一片
✓ 修复使用对角线渐变或径向渐变,避免与模块排列方向平行

水平渐变会使同一行的模块颜色接近,扫码器难以区分行内模块边界。对角线或径向渐变可保持每个模块的独立对比度。

第三节

工作原理

How It Works

核心公式

QR 模块颜色 = lerp(Color_A, Color_B, t) ,其中 t = (x + y) / (W + H)

变量说明

  • Color_A渐变起始颜色(RGB 三元组)
  • Color_B渐变结束颜色(RGB 三元组)
  • x模块在二维码中的列索引(从 0 开始)
  • y模块在二维码中的行索引(从 0 开始)
  • W二维码总列数(版本决定,如 21)
  • H二维码总行数(版本决定,如 21)

示例

版本 1 二维码(21×21),起始色 #FF0000(红),结束色 #0000FF(蓝)。对中心附近模块 (x=10, y=10):t = (10+10)/(21+21) = 20/42 ≈ 0.476。红色分量 = 255×(1-0.476) ≈ 133,蓝色分量 = 0×(1-0.476)+255×0.476 ≈ 121,绿色分量 = 0。最终颜色 ≈ #851F79(紫红)。

原始二维码解析定位框与模块结构替换元素(渐变/圆点/异形)渲染输出用户选择样式参数
用户输入 本地处理 输出结果
第五节

常见问题

Q & A
这个美化二维码能改颜色和形状吗?具体能改成什么样?

可以。本工具支持自定义前景色、背景色,以及码点形状(默认方块可选圆点)、定位框样式(异形定位框)。具体操作为:在右侧「样式设置」面板中,点击「颜色」区域选择色值,或直接输入十六进制色码;「形状」下拉可选「圆点」或「方块」;「定位框」样式有标准矩形、圆角矩形、异形边框可选。所有修改实时预览,无需重新生成。

我生成的二维码扫出来是乱码,是不是美化坏了?

二维码美化只改变视觉样式,不修改编码内容。扫出来乱码通常是原始内容本身有问题(比如输入的中文未编码、链接里含特殊字符、或内容超过二维码容量)。建议先拿内容生成一个纯黑白标准码测试,如果标准码能正常扫、美化码扫不出,才是美化导致的问题(极罕见,一般因对比度不足)。本工具默认保持高对比度,如遇扫描失败,可尝试加深前景色或加粗码点。

为什么我生成的二维码扫出来特别慢,要等好几秒?

扫描速度主要取决于二维码的「版本」(即信息密度)。内容越长、纠错等级越高,二维码版本越高、模块越密集,手机对焦和解码耗时越长。本工具默认使用 M 级纠错(约15%冗余),如内容较短(小于50字符)可手动改为 L 级纠错,降低密度。另外,圆点或异形定位框对某些扫码器(特别是老版本微信)的识别速度有轻微影响,建议优先使用标准方块样式。

这个工具是纯前端处理的吗?我的二维码内容会不会被上传到服务器?

完全是前端处理,所有生成逻辑在浏览器内完成,不会上传任何内容到服务器。输入的文字、链接、或图片直接在本机用 JavaScript 生成二维码矩阵,再叠加样式渲染。关闭页面后所有数据即销毁。如果你在意隐私(比如生成支付码、WiFi 密码码),可放心使用,断网也能正常生成。

生成的图片能直接商用吗?有没有版权问题?

本工具生成的二维码图像本身没有版权限制,可以自由用于商业用途(海报、名片、包装等)。但需注意:1)二维码内包含的内容(如链接、文字)的版权归内容提供者所有;2)如果套用了工具内置的模板(如特定配色方案或边框图案),模板本身为工具方设计,商用建议自行修改后使用。工具不保留生成图像的任何权利。

为什么我生成的二维码在微信里能扫,但在支付宝里扫不出来?

不同扫码器对二维码的解码容错能力有差异。微信和支付宝均遵循 QR 码国际标准(ISO/IEC 18004),但对纠错、模块对比度、定位图形失真的容忍度不同。常见原因:1)前景色太浅或背景色太深,支付宝扫码器对对比度要求更高;2)使用了圆点或异形定位框,支付宝部分版本对非标准定位框解码不稳定。建议:先尝试黑色前景 + 白色背景;若必须用彩色,保持前景明度 ≤ 30%、背景明度 ≥ 85%,并用标准方块样式。

我输入了一个很长的网址,生成后二维码图片特别大,怎么调小?

二维码图片的「物理尺寸」和「实际模块数」是两回事。你看到的图片大小是由「模块尺寸」和「边距」控制的,可以在样式面板中调小这两个值来缩小图片。但注意:如果内容本身很长(超过200字符),二维码版本会自动升高,模块数量变多,即使调小模块尺寸,图片也不会无限缩小,因为需要保证每个模块有足够的打印/显示清晰度。建议先缩短网址(用短链接服务),再生成。

为什么我导出 PNG 后背景不是透明的?怎么才能去掉白底?

本工具默认在二维码周围保留白色边距(quiet zone),这是 QR 码标准要求的,去掉会导致扫描失败。如果你需要透明背景用于叠加设计,可以在样式面板中勾选「透明背景」选项,此时边距区域会变为透明,但二维码模块本身仍保留颜色。注意:在深色背景上使用时,必须确保二维码前景色与背景有足够对比度(至少 70% 明度差),否则扫码器可能无法识别。

圆点模式和方块模式生成的二维码,扫描成功率一样吗?

不完全一样。方块模式(标准模块)与 QR 码原始设计一致,扫描成功率最高。圆点模式将方块改为圆形,视觉上更柔和,但圆形模块之间的间隙会略微降低模块面积,在内容密集(高版本)或扫码器性能差时,可能出现解码失败。实测:在微信 8.0+ 版本中,圆点模式在纠错 L 级、内容小于 50 字符时成功率与方块无异;内容超过 150 字符时,建议切回方块模式以保证兼容性。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭