用 React 做了一个二维码生成器，欢迎来玩！
Github 仓库
github.com/ciaochaos/qrbtf
访问网站
qrbtf.com
图文介绍
- 如何制作一个漂亮的二维码
urlify.cn/qUfaMb - QRBTF 开源啦！来写个二维码样式吧～
urlify.cn/VBNVVb
› React
This topic created in 2284 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 6, 2020
C2 样式操作演示视频来啦！
b23.tv/CxkcTU
b23.tv/CxkcTU
Supplement 2 · Jun 11, 2020
 |
1
ciaochaos OP  1
|
 |
2
theprimone May 28, 2020 1
有点意思的，之前生成二维码我用的包都是生成最简单的那种，另外这个应该拆出来一个包单独发布和维护啊
|
|
3
ciaochaos OP @theprimone 嗯嗯！目前做网站还只是考虑到方便用户，打算接下来有空多写一些样式完善起来，也看看大家有什么好的想法。
|
|
4
theprimone May 28, 2020 1
发包记得用 ts 就行
|
 |
5
fakenews Jun 4, 2020 1
挺有意思，希望坚持下去
|
 |
7
Leigg Jun 4, 2020 via Android 1
可以的，点赞
|
 |
8
xingyuc Jun 5, 2020 1
厉害厉害
|
 |
9
2I0Mto2kjm0c0B9i Jun 5, 2020 1
不错，应该是基于 qrcode-generator 写的吧。平时用这个比较多
|
|
10
ciaochaos OP @iapplebear 是滴！
|
 |
11
chenliangngng Jun 5, 2020 via Android 1
可以可以
|
 |
12
hlayk Jun 5, 2020 1
做的挺好的 就是按住 shift 滚动 这个交互 不怎么方便
|
 |
14
MomoS Jun 5, 2020 via Android 1
一直想找这种工具
|
 |
15
qiayue Jun 5, 2020 1
作者是两位大一的学生，很不错
|
 |
16
Sivan Jun 5, 2020 1
有意思，也很实用。支持！
|
 |
19
kop1989 Jun 5, 2020 1
优秀，很棒，继续加油啊。
|
 |
20
jimmy3780 Jun 5, 2020 1
继续加油~支持一个
|
|
21
hlayk Jun 5, 2020 1
@ciaochaos https://wifi.dev.bdw.to/ 你们可以考虑加个这个 还有啊 你们的彩色的 SP-1 识别率没有黑白的高（我只是试了一下 好看但不实用）
|
|
22
ciaochaos OP @hlayk 好滴，之后考虑把文字、网址、Wi-Fi 这些都分开选择，添加图床等功能，感谢提点。识别率这个问题一直很玄学，只能在微信里多试试呗，识别不出的原因有很多，甚至可能是二维码在屏幕中的尺寸过大。
|
 |
23
rebel28 Jun 5, 2020 1
shift 滚动有点难受 建议改进一下
|
 |
25
unicloud Jun 5, 2020 2
常规普通二维码生成器： https://www.dute.org/qrcode 支持插入 Logo 哦
|
|
26
ciaochaos OP @unicloud 很多人喜欢在矢量编辑软件中手动插入 Logo，我们就没做 Logo 的图像上传啦。下载 SVG，完美融入设计工作流。
|
 |
27
simple11 Jun 5, 2020 1
支持一下
|
 |
28
liyang5945 Jun 5, 2020 via Android 3
666，过几天我准备摆摊，弄个这样的收款码
|
|
29
ciaochaos OP @liyang5945 哈哈哈哈哈哈哈哈！万一别人扫不出来别怪我
|
 |
30
whatsbug Jun 5, 2020 1
哈哈，iOS 也有类似的项目：github.com/EFPrefix/EFQRCode
|
 |
33
zvcs Jun 5, 2020 via iPhone 1
太棒了，start
|
|
34
ciaochaos OP @unicloud 嗯，所以我觉得插入 Logo 这件事，还是本地编辑一下靠谱。像苹果公众号最后的二维码那样，中间想挖去多少的点，都自由控制。
|
 |
35
hujiev2 Jun 6, 2020 1
以前摩拜单车 app 里的二维码做的很不错,是动态的
|
 |
37
leverestfish Jun 6, 2020 1
可以增加一些反白的模板的吗，感觉这个需求挺多的（用于深色背景）
|
|
38
ciaochaos OP @leverestfish 有道理诶！目前可以把某些样式的信息点颜色改成白色，下载 SVG 后在 Adobe Illustrator 等软件中添加深色背景
|
|
39
leverestfish Jun 6, 2020 1
@ciaochaos 信息点永远都应该是深色，反白的意思是把非信息点（白色区域）改成一些自定义形状，信息点（黑色区域）掏空，实际应用的时候用深色背景来填充。
|
|
40
ciaochaos OP @leverestfish SVG 里这是复合路径，我经常在 AI 中用快捷键 command 8 添加。不过你说的对，我到时候会做一些组合模版，更加适合用于公众号、电商等场景的直接使用
|
|
41
leverestfish Jun 6, 2020 1
@ciaochaos 嗯嗯，我之前也玩过一会二维码，不过只是用 AI 手动做了几个，你这个项目很棒，点赞
|
 |
42
bojue Jun 6, 2020 via iPhone 1
有意思
|
|
43
ciaochaos OP @leverestfish 原来如此哈哈，看来是同道中人。我做这个项目的缘起也是希望这个制作流程能更好的融入我原有的工作流，所以坚持选择使用 SVG 表达图像进一步渲染 Canvas （ JPG ），希望接下来我能多做一些个性化的样式哈
|
 |
44
burnithecy Jun 7, 2020 1
很不错，下载下来了。研究下
|
|
45
ciaochaos OP @burnithecy 来写几个样式～
|
 |
46
BlackHole1 PRO 1
好棒啊，已 star 、感谢
|
|
47
ciaochaos OP @BlackHole1 耶！开心
|
 |
48
leffz Jun 7, 2020 1
还不错哦，厉害
|
 |
49
auzeonfung Jun 7, 2020 1
SP-1 用 iOS 自帶的相机扫不出来……
|
|
50
ciaochaos OP @auzeonfung 不同的扫描算法识别率不同，用微信的试试呗
|
 |
51
indev Jun 7, 2020 1
挺漂亮的
|
 |
52
lblblong Jun 8, 2020 1
酷酷酷，喜欢
|
 |
53
qqqz Jun 9, 2020 4
之前业余时间也做过，后来觉得是个伪需求，就放弃了
qrdream.com |
 |
54
realpg Jun 9, 2020 1
曾经看到过一个比较奇葩且高大上的二维码
就是他是全部都有颜色，无论是空白还是填充（ 1 和 0 ） 而且 1 和 1 0 和 0 的 颜色都不一样 颜色深浅变化 |
 |
60
godbmw Jun 9, 2020 1
基于云开发（ TCB ）的 web 端和静态网站托管🐂
|
 |
62
northess Jun 10, 2020 1
很棒的想法
|
 |
63
zhw2590582 Jun 10, 2020 1
不错，不过按住 shift 滚动，我还是第一次遇到这样交互的
|
|
64
ciaochaos OP @zhw2590582 哈哈哈哈，临时解决一下而已
|
 |
65
muayang Jun 10, 2020 via iPhone 1
支持一下
|
 |
66
jiangzm Jun 10, 2020 1
既然是前端生成， 为啥从后台下载
|
 |
68
lankaka Jun 11, 2020 1
棒棒哒 支持楼主
|
 |
69
doveyoung Jun 11, 2020 1
呀，赞助了 10.01 忘了写备注（ dog
|
|
71
ciaochaos OP @theprimone Node Package 来了！ github.com/cpunisher/react-qrbtf
|
|
72
theprimone Jun 11, 2020 1
阔以啊，这效率
|
|
73
theprimone Jun 11, 2020
不过你打包工具不在仓库？
|
 |
74
JmmBite Jun 11, 2020 1
😊🥺😉😍😘😚😜😂😝😳😁😣😢 emoji 符号解析出来乱码。
貌似大多数的二维码都没有解决这个问题 |
 |
75
aaronysj Jun 12, 2020 1
最近发现 企业微信 的扫码登录二维码样式变了，是不是楼主干的，哈哈
|
 |
76
Msxx Jun 12, 2020 1
作者老哥，能出动态的吗？哈哈哈。好活！
|
 |
79
yuankui Jun 15, 2020 1
老铁，浪的一匹~
|
 |
81
tinytin Jun 15, 2020 1
不错
|
 |
82
godgc Jun 15, 2020 1
挺有意思的～ 支持！
|
 |
84
shoaly Jun 15, 2020 1
老哥可以的, 还差一个功能 就是把 最后那种支付宝 的二维码支持叠加一个方型的背景, 就更完美了, 我一定打赏支持~~
|
 |
86
ufan0 Jun 16, 2020 1
页面效果很漂亮，请问是基于什么组件做的吗？
|
|
87
ciaochaos OP @ufan0 谢谢！二维码生成是基于 davidshimjs/qrcodejs 的常规生成算法改进的，其他的是我们自己基于 React 做的。
|
 |
88
tinkerer Jun 16, 2020 1
starred
|
 |
90
L00kback Jun 17, 2020 1
看到结尾两个大一学生所做，哭了，respect 。。。支持一下
|
 |
91
ali0531 Jun 17, 2020 1
希望再出一个 VUE 版的
|
 |
93
d5 Jun 17, 2020 1
太酷了，点赞
|
|
95
ciaochaos OP p.s. 网站新增一个圆角矩形的定位点样式，有着与 iOS 图标一致的曲率连续圆角，欢迎尝试 👏
|
 |
96
realkun Jun 18, 2020 1
很好看 很艺术啊
|
 |
98
robinlovemaggie Jun 19, 2020 1
头像背景那个示例好像识别不出来啊～
|
|
99
ciaochaos OP @robinlovemaggie 是用什么扫描的？多试试呗，识别不出来的原因有很多。期待反馈
|
 |
100
ExploreWay Jun 19, 2020 1
老哥，稳得很！
|
Select Language