前端实现艺术二维码生成～

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

React

这是一个创建于 1967 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 React 做了一个二维码生成器，欢迎来玩！

Github 仓库
github.com/ciaochaos/qrbtf

访问网站
qrbtf.com

图文介绍

如何制作一个漂亮的二维码
urlify.cn/qUfaMb
QRBTF 开源啦！来写个二维码样式吧～
urlify.cn/VBNVVb

第 1 条附言 2020-06-06 21:49:36 +08:00

C2 样式操作演示视频来啦！
b23.tv/CxkcTU

第 2 条附言 2020-06-11 19:23:27 +08:00

！！！

你们要的 React 库来啦

Github
github.com/cpunisher/react-qrbtf

安装

npm install react-qrbtf --save

第 3 条附言 2020-06-28 09:30:15 +08:00

我们的二维码生成 API 开始测试啦！

https://www.yuque.com/qrbtf/docs/api

http://api.qrbtf.com/qrcode?data=https://qrbtf.com&level=M&style=base&type=round&size=50&opacity=30&posType=planet&otherColor=%23000000&posColor=%23000000

二维码

生成器

GitHub

React

167 条回复 2020-09-03 12:34:38 +08:00

1 2

ciaochaos

2020-05-27 15:26:21 +08:00

效果图
blog.ciaochaos.com/projects/qrcode/qrs2.jpg
blog.ciaochaos.com/projects/qrcode/qrc2.jpg

theprimone

2020-05-28 09:18:57 +08:00

有点意思的，之前生成二维码我用的包都是生成最简单的那种，另外这个应该拆出来一个包单独发布和维护啊

ciaochaos

2020-05-28 12:37:47 +08:00

@theprimone 嗯嗯！目前做网站还只是考虑到方便用户，打算接下来有空多写一些样式完善起来，也看看大家有什么好的想法。

theprimone

2020-05-28 21:55:24 +08:00

发包记得用 ts 就行

fakenews

2020-06-04 23:52:14 +08:00

挺有意思，希望坚持下去

ciaochaos

2020-06-04 23:53:09 +08:00

@fakenews 谢谢！

Leigg

2020-06-04 23:59:12 +08:00 via Android

可以的，点赞

xingyuc

2020-06-05 09:28:59 +08:00

厉害厉害

2I0Mto2kjm0c0B9i

2020-06-05 09:54:57 +08:00

不错，应该是基于 qrcode-generator 写的吧。平时用这个比较多

ciaochaos

2020-06-05 11:55:02 +08:00 via iPhone

@iapplebear 是滴！

chenliangngng

2020-06-05 12:08:13 +08:00 via Android

可以可以

hlayk

2020-06-05 13:45:32 +08:00

做的挺好的就是按住 shift 滚动这个交互不怎么方便

ciaochaos

2020-06-05 13:48:18 +08:00

@hlayk 哈哈哈哈！想着做一个左右切换的按钮，或是鼠标拖移，会不会好一些。因为设计之初考虑移动端的版面比较多，桌面端是有些欠考虑哈哈

MomoS

2020-06-05 14:10:32 +08:00 via Android

一直想找这种工具

qiayue

PRO

2020-06-05 14:23:17 +08:00

作者是两位大一的学生，很不错

Sivan

2020-06-05 14:23:34 +08:00

有意思，也很实用。支持！

ciaochaos

2020-06-05 14:24:02 +08:00

@qiayue 被发现啦！感谢支持

ciaochaos

2020-06-05 14:24:17 +08:00

@Sivan 耶！

kop1989

2020-06-05 14:27:42 +08:00

优秀，很棒，继续加油啊。

jimmy3780

2020-06-05 15:23:17 +08:00

继续加油~支持一个

hlayk

2020-06-05 16:58:33 +08:00

@ciaochaos https://wifi.dev.bdw.to/ 你们可以考虑加个这个还有啊你们的彩色的 SP-1 识别率没有黑白的高（我只是试了一下好看但不实用）

ciaochaos

2020-06-05 17:20:45 +08:00

@hlayk 好滴，之后考虑把文字、网址、Wi-Fi 这些都分开选择，添加图床等功能，感谢提点。识别率这个问题一直很玄学，只能在微信里多试试呗，识别不出的原因有很多，甚至可能是二维码在屏幕中的尺寸过大。

violetlai

2020-06-05 17:42:26 +08:00

shift 滚动有点难受建议改进一下

ciaochaos

2020-06-05 17:46:36 +08:00 via iPhone

@violetlai 临时解决一下哈哈，肯定会改～

unicloud

2020-06-05 17:55:11 +08:00

常规普通二维码生成器： https://www.dute.org/qrcode 支持插入 Logo 哦

ciaochaos

2020-06-05 17:58:55 +08:00 via iPhone

@unicloud 很多人喜欢在矢量编辑软件中手动插入 Logo，我们就没做 Logo 的图像上传啦。下载 SVG，完美融入设计工作流。

simple11

2020-06-05 18:11:21 +08:00

支持一下

liyang5945

2020-06-05 18:13:37 +08:00 via Android

666，过几天我准备摆摊，弄个这样的收款码

ciaochaos

2020-06-05 18:15:25 +08:00 via iPhone

@liyang5945 哈哈哈哈哈哈哈哈！万一别人扫不出来别怪我

td width="auto" valign="top" align="left">

whatsbug

2020-06-05 18:22:21 +08:00

哈哈，iOS 也有类似的项目：github.com/EFPrefix/EFQRCode

ciaochaos

2020-06-05 18:34:47 +08:00 via iPhone

@whatsbug Wow 这个也好棒！

unicloud

2020-06-05 18:40:48 +08:00

@ciaochaos 确实，矢量图就没必要插入 Logo 了。我这个工具也支持导出为 SVG，但 SVG 是不支持 Logo 的。

zvcs

2020-06-05 18:42:29 +08:00 via iPhone

太棒了，start

ciaochaos

2020-06-05 18:44:58 +08:00 via iPhone

@unicloud 嗯，所以我觉得插入 Logo 这件事，还是本地编辑一下靠谱。像苹果公众号最后的二维码那样，中间想挖去多少的点，都自由控制。

hujiev2

2020-06-06 08:33:36 +08:00

以前摩拜单车 app 里的二维码做的很不错,是动态的

ciaochaos

2020-06-06 08:36:21 +08:00

@hujiev2 我看到过！ 2.5D 的动态设计。

leverestfish

2020-06-06 15:12:32 +08:00

可以增加一些反白的模板的吗，感觉这个需求挺多的（用于深色背景）

ciaochaos

2020-06-06 15:14:42 +08:00 via iPhone

@leverestfish 有道理诶！目前可以把某些样式的信息点颜色改成白色，下载 SVG 后在 Adobe Illustrator 等软件中添加深色背景

leverestfish

2020-06-06 17:05:34 +08:00

@ciaochaos 信息点永远都应该是深色，反白的意思是把非信息点（白色区域）改成一些自定义形状，信息点（黑色区域）掏空，实际应用的时候用深色背景来填充。

ciaochaos

2020-06-06 17:27:54 +08:00

@leverestfish SVG 里这是复合路径，我经常在 AI 中用快捷键 command 8 添加。不过你说的对，我到时候会做一些组合模版，更加适合用于公众号、电商等场景的直接使用

leverestfish

2020-06-06 18:02:51 +08:00

@ciaochaos 嗯嗯，我之前也玩过一会二维码，不过只是用 AI 手动做了几个，你这个项目很棒，点赞

bojue

2020-06-06 18:17:08 +08:00 via iPhone

有意思

ciaochaos

2020-06-06 18:20:40 +08:00

@leverestfish 原来如此哈哈，看来是同道中人。我做这个项目的缘起也是希望这个制作流程能更好的融入我原有的工作流，所以坚持选择使用 SVG 表达图像进一步渲染 Canvas （ JPG ），希望接下来我能多做一些个性化的样式哈

burnithecy

2020-06-07 08:35:23 +08:00

很不错，下载下来了。研究下

ciaochaos

2020-06-07 11:12:02 +08:00 via iPhone

@burnithecy 来写几个样式～

BlackHole1

PRO

2020-06-07 20:18:50 +08:00

好棒啊，已 star 、感谢

ciaochaos

2020-06-07 20:24:08 +08:00 via iPhone

@BlackHole1 耶！开心

leffz

2020-06-07 22:08:25 +08:00

还不错哦，厉害

auzeonfung

2020-06-07 22:17:38 +08:00

SP-1 用 iOS 自的相机扫不出来……

ciaochaos

2020-06-07 22:34:23 +08:00

@auzeonfung 不同的扫描算法识别率不同，用微信的试试呗

indev

2020-06-07 22:46:07 +08:00

挺漂亮的

lblblong

2020-06-08 10:26:15 +08:00

酷酷酷，喜欢

qqqz

2020-06-09 12:16:57 +08:00

之前业余时间也做过，后来觉得是个伪需求，就放弃了
qrdream.com

realpg

PRO

2020-06-09 12:51:03 +08:00

曾经看到过一个比较奇葩且高大上的二维码
就是他是全部都有颜色，无论是空白还是填充（ 1 和 0 ）
而且 1 和 1 0 和 0 的颜色都不一样
颜色深浅变化

ciaochaos

2020-06-09 13:20:49 +08:00

@Phuasheng 哇！！！！！！膜拜大佬

ciaochaos

2020-06-09 13:21:38 +08:00

@realpg 有没有效果图呀？

EyreFree

2020-06-09 13:31:06 +08:00

@whatsbug Wow 这个也好棒！

realpg

PRO

2020-06-09 14:14:45 +08:00

@ciaochaos #56
没了是一个网站自己生成的自己用的忘了啥了
不是生成器
而且，识别率比你这种要低一些但是绝对可以接受

ciaochaos

2020-06-09 14:29:04 +08:00

@realpg 哈哈没图没太懂

godbmw

2020-06-09 15:06:24 +08:00

基于云开发（ TCB ）的 web 端和静态网站托管

realpg

PRO

2020-06-09 15:09:38 +08:00

@ciaochaos #59
你弄一个黑白二维码标准的
全部点阵化有黑点和白点
他的白点全是浅色黑点全是深色
但是浅色不是同样的颜色深色也不是 ……

Norths

2020-06-10 09:47:52 +08:00

很棒的想法

zhw2590582

2020-06-10 13:18:27 +08:00

不错，不过按住 shift 滚动，我还是第一次遇到这样交互的

ciaochaos

2020-06-10 14:41:41 +08:00

@zhw2590582 哈哈哈哈，临时解决一下而已

muayang

2020-06-10 17:52:49 +08:00 via iPhone

支持一下

jiangzm

2020-06-10 18:03:06 +08:00

既然是前端生成，为啥从后台下载

ciaochaos

2020-06-10 18:24:13 +08:00

@jiangzm 哈哈并不是，不信你断网试试

lankaka

2020-06-11 09:42:31 +08:00

棒棒哒支持楼主

doveyoung

2020-06-11 14:11:18 +08:00

呀，赞助了 10.01 忘了写备注（ dog

ciaochaos

2020-06-11 16:21:06 +08:00 via iPhone

@doveyoung 嘻嘻感谢！

ciaochaos

2020-06-11 19:27:21 +08:00

@theprimone Node Package 来了！ github.com/cpunisher/react-qrbtf

theprimone

2020-06-11 22:20:51 +08:00

阔以啊，这效率

theprimone

2020-06-11 22:23:09 +08:00

不过你打包工具不在仓库？

JmmBite

2020-06-11 23:45:54 +08:00

emoji 符号解析出来乱码。
貌似大多数的二维码都没有解决这个问题

aaronysj

2020-06-12 10:11:11 +08:00

最近发现企业微信的扫码登录二维码样式变了，是不是楼主干的，哈哈

Msxx

2020-06-12 10:12:07 +08:00

作者老哥，能出动态的吗？哈哈哈。好活！

ciaochaos

2020-06-12 11:26:00 +08:00 via iPhone

@aaronysj 哈哈哈哈不是不是
@Msxx 本来也想做，就是做动态前端计算压力太大了哈哈

ciaochaos

2020-06-12 11:34:51 +08:00

@JmmBite 我研究一下

yuankui

2020-06-15 10:25:44 +08:00

老铁，浪的一匹~

ciaochaos

2020-06-15 10:39:50 +08:00 via iPhone

@yuankui

tinytin

2020-06-15 12:27:25 +08:00

不错

godgc

2020-06-15 12:36:16 +08:00

挺有意思的～支持！

ciaochaos

2020-06-15 13:47:04 +08:00

@tinytin @godgc 谢谢！

shoaly

2020-06-15 13:57:33 +08:00

老哥可以的, 还差一个功能就是把最后那种支付宝的二维码支持叠加一个方型的背景, 就更完美了, 我一定打赏支持~~

ciaochaos

2020-06-16 20:06:41 +08:00

@shoaly 将来会针对电商、自媒体、收款赞赏等场景做对应的模版，谢谢支持！

ufan0

2020-06-16 20:30:27 +08:00

页面效果很漂亮，请问是基于什么组件做的吗？

ciaochaos

2020-06-16 21:10:09 +08:00

@ufan0 谢谢！二维码生成是基于 davidshimjs/qrcodejs 的常规生成算法改进的，其他的是我们自己基于 React 做的。

tinkerer

2020-06-16 21:23:47 +08:00

starred

ciaochaos

2020-06-16 21:25:34 +08:00

@tinkerer ！！耶

L00kback

2020-06-17 09:27:42 +08:00

看到结尾两个大一学生所做，哭了，respect 。。。支持一下

ali0531

2020-06-17 11:48:39 +08:00

希望再出一个 VUE 版的

ciaochaos

2020-06-17 14:56:00 +08:00 via iPhone

@ali0531 想要吗哈哈，等我大二做

2020-06-17 15:31:27 +08:00

太酷，点赞

ciaochaos

2020-06-17 15:53:50 +08:00

@d5 :)

ciaochaos

2020-06-17 17:50:23 +08:00

p.s. 网站新增一个圆角矩形的定位点样式，有着与 iOS 图标一致的曲率连续圆角，欢迎尝试

realkun

2020-06-18 18:06:26 +08:00

很好看很艺术啊

ciaochaos

2020-06-18 23:07:10 +08:00

@realkun

robinlovemaggie

2020-06-19 10:51:18 +08:00

头像背景那个示例好像识别不出来啊～

ciaochaos

2020-06-19 11:00:29 +08:00

@robinlovemaggie 是用什么扫描的？多试试呗，识别不出来的原因有很多。期待反馈

100

ExploreWay

2020-06-19 11:10:55 +08:00

老哥，稳得很！

1 2