V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
ciaochaos
V2EX  ›  React

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

  ciaochaos · 2020-05-27 15:07:19 +08:00 · 35820 次点击
这是一个创建于 558 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

Github 仓库
github.com/ciaochaos/qrbtf

访问网站
qrbtf.com

图文介绍

第 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
167 条回复    2020-09-03 12:34:38 +08:00
1  2  
theprimone
    2
theprimone  
   2020-05-28 09:18:57 +08:00   ❤️ 1
有点意思的,之前生成二维码我用的包都是生成最简单的那种,另外这个应该拆出来一个包单独发布和维护啊
ciaochaos
    3
ciaochaos  
OP
   2020-05-28 12:37:47 +08:00
@theprimone 嗯嗯!目前做网站还只是考虑到方便用户,打算接下来有空多写一些样式完善起来,也看看大家有什么好的想法。
theprimone
    4
theprimone  
   2020-05-28 21:55:24 +08:00   ❤️ 1
发包记得用 ts 就行
fakenews
    5
fakenews  
   2020-06-04 23:52:14 +08:00   ❤️ 1
挺有意思,希望坚持下去
ciaochaos
    6
ciaochaos  
OP
   2020-06-04 23:53:09 +08:00
@fakenews 谢谢!
Leigg
    7
Leigg  
   2020-06-04 23:59:12 +08:00 via Android   ❤️ 1
可以的,点赞
xingyuc
    8
xingyuc  
   2020-06-05 09:28:59 +08:00   ❤️ 1
厉害厉害
iapplebear
    9
iapplebear  
   2020-06-05 09:54:57 +08:00   ❤️ 1
不错,应该是基于 qrcode-generator 写的吧。平时用这个比较多
ciaochaos
    10
ciaochaos  
OP
   2020-06-05 11:55:02 +08:00 via iPhone
@iapplebear 是滴!
chenliangngng
    11
chenliangngng  
   2020-06-05 12:08:13 +08:00 via Android   ❤️ 1
可以可以
hlayk
    12
hlayk  
   2020-06-05 13:45:32 +08:00   ❤️ 1
做的挺好的 就是按住 shift 滚动 这个交互 不怎么方便
ciaochaos
    13
ciaochaos  
OP
   2020-06-05 13:48:18 +08:00
@hlayk 哈哈哈哈!想着做一个左右切换的按钮,或是鼠标拖移,会不会好一些。因为设计之初考虑移动端的版面比较多,桌面端是有些欠考虑哈哈
MomoS
    14
MomoS  
   2020-06-05 14:10:32 +08:00 via Android   ❤️ 1
一直想找这种工具
qiayue
    15
qiayue  
   2020-06-05 14:23:17 +08:00   ❤️ 1
作者是两位大一的学生,很不错
Sivan
    16
Sivan  
   2020-06-05 14:23:34 +08:00   ❤️ 1
有意思,也很实用。支持!
ciaochaos
    17
ciaochaos  
OP
   2020-06-05 14:24:02 +08:00
@qiayue 被发现啦!感谢支持
ciaochaos
    18
ciaochaos  
OP
   2020-06-05 14:24:17 +08:00
@Sivan 耶!
kop1989
    19
kop1989  
   2020-06-05 14:27:42 +08:00   ❤️ 1
优秀,很棒,继续加油啊。
jimmy3780
    20
jimmy3780  
   2020-06-05 15:23:17 +08:00   ❤️ 1
继续加油~支持一个
hlayk
    21
hlayk  
   2020-06-05 16:58:33 +08:00   ❤️ 1
@ciaochaos https://wifi.dev.bdw.to/ 你们可以考虑加个这个 还有啊 你们的彩色的 SP-1 识别率没有黑白的高(我只是试了一下 好看但不实用)
ciaochaos
    22
ciaochaos  
OP
   2020-06-05 17:20:45 +08:00
@hlayk 好滴,之后考虑把文字、网址、Wi-Fi 这些都分开选择,添加图床等功能,感谢提点。识别率这个问题一直很玄学,只能在微信里多试试呗,识别不出的原因有很多,甚至可能是二维码在屏幕中的尺寸过大。
violetlai
    23
violetlai  
   2020-06-05 17:42:26 +08:00   ❤️ 1
shift 滚动有点难受 建议改进一下
ciaochaos
    24
ciaochaos  
OP
   2020-06-05 17:46:36 +08:00 via iPhone
@violetlai 临时解决一下哈哈,肯定会改~
unicloud
    25
unicloud  
   2020-06-05 17:55:11 +08:00   ❤️ 2
常规普通二维码生成器: https://www.dute.org/qrcode 支持插入 Logo 哦
ciaochaos
    26
ciaochaos  
OP
   2020-06-05 17:58:55 +08:00 via iPhone
@unicloud 很多人喜欢在矢量编辑软件中手动插入 Logo,我们就没做 Logo 的图像上传啦。下载 SVG,完美融入设计工作流。
simple11
    27
simple11  
   2020-06-05 18:11:21 +08:00   ❤️ 1
支持一下
liyang5945
    28
liyang5945  
   2020-06-05 18:13:37 +08:00 via Android   ❤️ 3
666,过几天我准备摆摊,弄个这样的收款码
ciaochaos
    29
ciaochaos  
OP
   2020-06-05 18:15:25 +08:00 via iPhone
@liyang5945 哈哈哈哈哈哈哈哈!万一别人扫不出来别怪我
whatsbug
    30
whatsbug  
   2020-06-05 18:22:21 +08:00   ❤️ 1
哈哈,iOS 也有类似的项目:github.com/EFPrefix/EFQRCode
ciaochaos
    31
ciaochaos  
OP
   2020-06-05 18:34:47 +08:00 via iPhone
@whatsbug Wow 这个也好棒!
unicloud
    32
unicloud  
   2020-06-05 18:40:48 +08:00   ❤️ 1
@ciaochaos 确实,矢量图就没必要插入 Logo 了。我这个工具也支持导出为 SVG,但 SVG 是不支持 Logo 的。
zvcs
    33
zvcs  
   2020-06-05 18:42:29 +08:00 via iPhone   ❤️ 1
太棒了,start
ciaochaos
    34
ciaochaos  
OP
   2020-06-05 18:44:58 +08:00 via iPhone
@unicloud 嗯,所以我觉得插入 Logo 这件事,还是本地编辑一下靠谱。像苹果公众号最后的二维码那样,中间想挖去多少的点,都自由控制。
hujiev2
    35
hujiev2  
   2020-06-06 08:33:36 +08:00   ❤️ 1
以前摩拜单车 app 里的二维码做的很不错,是动态的
ciaochaos
    36
ciaochaos  
OP
   2020-06-06 08:36:21 +08:00
@hujiev2 我看到过! 2.5D 的动态设计。
leverestfish
    37
leverestfish  
   2020-06-06 15:12:32 +08:00   ❤️ 1
可以增加一些反白的模板的吗,感觉这个需求挺多的(用于深色背景)
ciaochaos
    38
ciaochaos  
OP
   2020-06-06 15:14:42 +08:00 via iPhone
@leverestfish 有道理诶!目前可以把某些样式的信息点颜色改成白色,下载 SVG 后在 Adobe Illustrator 等软件中添加深色背景
leverestfish
    39
leverestfish  
   2020-06-06 17:05:34 +08:00   ❤️ 1
@ciaochaos 信息点永远都应该是深色,反白的意思是把非信息点(白色区域)改成一些自定义形状,信息点(黑色区域)掏空,实际应用的时候用深色背景来填充。
ciaochaos
    40
ciaochaos  
OP
   2020-06-06 17:27:54 +08:00
@leverestfish SVG 里这是复合路径,我经常在 AI 中用快捷键 command 8 添加。不过你说的对,我到时候会做一些组合模版,更加适合用于公众号、电商等场景的直接使用
leverestfish
    41
leverestfish  
   2020-06-06 18:02:51 +08:00   ❤️ 1
@ciaochaos 嗯嗯,我之前也玩过一会二维码,不过只是用 AI 手动做了几个,你这个项目很棒,点赞
bojue
    42
bojue  
   2020-06-06 18:17:08 +08:00 via iPhone   ❤️ 1
有意思
ciaochaos
    43
ciaochaos  
OP
   2020-06-06 18:20:40 +08:00
@leverestfish 原来如此哈哈,看来是同道中人。我做这个项目的缘起也是希望这个制作流程能更好的融入我原有的工作流,所以坚持选择使用 SVG 表达图像进一步渲染 Canvas ( JPG ),希望接下来我能多做一些个性化的样式哈
burnithecy
    44
burnithecy  
   2020-06-07 08:35:23 +08:00   ❤️ 1
很不错,下载下来了。研究下
ciaochaos
    45
ciaochaos  
OP
   2020-06-07 11:12:02 +08:00 via iPhone
@burnithecy 来写几个样式~
BlackHole1
    46
BlackHole1  
   2020-06-07 20:18:50 +08:00   ❤️ 1
好棒啊,已 star 、感谢
ciaochaos
    47
ciaochaos  
OP
   2020-06-07 20:24:08 +08:00 via iPhone
@BlackHole1 耶!开心
leffz
    48
leffz  
   2020-06-07 22:08:25 +08:00   ❤️ 1
还不错哦,厉害
auzeonfung
    49
auzeonfung  
   2020-06-07 22:17:38 +08:00   ❤️ 1
SP-1 用 iOS 自帶的相机扫不出来……
ciaochaos
    50
ciaochaos  
OP
   2020-06-07 22:34:23 +08:00
@auzeonfung 不同的扫描算法识别率不同,用微信的试试呗
indev
    51
indev  
   2020-06-07 22:46:07 +08:00   ❤️ 1
挺漂亮的
lblblong
    52
lblblong  
   2020-06-08 10:26:15 +08:00   ❤️ 1
酷酷酷,喜欢
Phuasheng
    53
Phuasheng  
   2020-06-09 12:16:57 +08:00   ❤️ 4
之前业余时间也做过,后来觉得是个伪需求,就放弃了
qrdream.com
realpg
    54
realpg  
   2020-06-09 12:51:03 +08:00   ❤️ 1
曾经看到过一个比较奇葩且高大上的二维码
就是他是全部都有颜色,无论是空白还是填充( 1 和 0 )
而且 1 和 1 0 和 0 的 颜色都不一样
颜色深浅变化
ciaochaos
    55
ciaochaos  
OP
   2020-06-09 13:20:49 +08:00
@Phuasheng 哇!!!!!!膜拜大佬
ciaochaos
    56
ciaochaos  
OP
   2020-06-09 13:21:38 +08:00
@realpg 有没有效果图呀?
EyreFree
    57
EyreFree  
   2020-06-09 13:31:06 +08:00
@whatsbug Wow 这个也好棒!🐶
realpg
    58
realpg  
   2020-06-09 14:14:45 +08:00
@ciaochaos #56
没了 是一个网站自己生成的自己用的 忘了啥了
不是生成器
而且,识别率比你这种要低一些 但是绝对可以接受
ciaochaos
    59
ciaochaos  
OP
   2020-06-09 14:29:04 +08:00
@realpg 哈哈没图没太懂
godbmw
    60
godbmw  
   2020-06-09 15:06:24 +08:00   ❤️ 1
基于云开发( TCB )的 web 端和静态网站托管🐂
realpg
    61
realpg  
   2020-06-09 15:09:38 +08:00
@ciaochaos #59
你弄一个黑白二维码 标准的
全部点阵化 有黑点和白点
他的白点全是浅色 黑点全是深色
但是浅色不是同样的颜色 深色也不是 ……
Norths
    62
Norths  
   2020-06-10 09:47:52 +08:00   ❤️ 1
很棒的想法
zhw2590582
    63
zhw2590582  
   2020-06-10 13:18:27 +08:00   ❤️ 1
不错,不过按住 shift 滚动,我还是第一次遇到这样交互的
ciaochaos
    64
ciaochaos  
OP
   2020-06-10 14:41:41 +08:00
@zhw2590582 哈哈哈哈,临时解决一下而已
muayang
    65
muayang  
   2020-06-10 17:52:49 +08:00 via iPhone   ❤️ 1
支持一下
jiangzm
    66
jiangzm  
   2020-06-10 18:03:06 +08:00   ❤️ 1
既然是前端生成, 为啥从后台下载
ciaochaos
    67
ciaochaos  
OP
   2020-06-10 18:24:13 +08:00
@jiangzm 哈哈并不是,不信你断网试试
lankaka
    68
lankaka  
   2020-06-11 09:42:31 +08:00   ❤️ 1
棒棒哒 支持楼主
doveyoung
    69
doveyoung  
   2020-06-11 14:11:18 +08:00   ❤️ 1
呀,赞助了 10.01 忘了写备注( dog
ciaochaos
    70
ciaochaos  
OP
   2020-06-11 16:21:06 +08:00 via iPhone
@doveyoung 嘻嘻感谢!
ciaochaos
    71
ciaochaos  
OP
   2020-06-11 19:27:21 +08:00
theprimone
    72
theprimone  
   2020-06-11 22:20:51 +08:00   ❤️ 1
阔以啊,这效率
theprimone
    73
theprimone  
   2020-06-11 22:23:09 +08:00
不过你打包工具不在仓库?
JmmBite
    74
JmmBite  
   2020-06-11 23:45:54 +08:00   ❤️ 1
😊🥺😉😍😘😚😜😂😝😳😁😣😢 emoji 符号解析出来乱码。
貌似大多数的二维码都没有解决这个问题
aaronysj
    75
aaronysj  
   2020-06-12 10:11:11 +08:00   ❤️ 1
最近发现 企业微信 的扫码登录二维码样式变了,是不是楼主干的,哈哈
Msxx
    76
Msxx  
   2020-06-12 10:12:07 +08:00   ❤️ 1
作者老哥,能出动态的吗?哈哈哈。好活!
ciaochaos
    77
ciaochaos  
OP
   2020-06-12 11:26:00 +08:00 via iPhone
@aaronysj 哈哈哈哈不是不是
@Msxx 本来也想做,就是做动态前端计算压力太大了哈哈
ciaochaos
    78
ciaochaos  
OP
   2020-06-12 11:34:51 +08:00
@JmmBite 我研究一下
yuankui
    79
yuankui  
   2020-06-15 10:25:44 +08:00   ❤️ 1
老铁,浪的一匹~
ciaochaos
    80
ciaochaos  
OP
   2020-06-15 10:39:50 +08:00 via iPhone
@yuankui ✊🏻
tinytin
    81
tinytin  
   2020-06-15 12:27:25 +08:00   ❤️ 1
不错
godgc
    82
godgc  
   2020-06-15 12:36:16 +08:00   ❤️ 1
挺有意思的~ 支持!
ciaochaos
    83
ciaochaos  
OP
   2020-06-15 13:47:04 +08:00
@tinytin @godgc 谢谢!
shoaly
    84
shoaly  
   2020-06-15 13:57:33 +08:00   ❤️ 1
老哥可以的, 还差一个功能 就是把 最后那种支付宝 的二维码支持叠加一个方型的背景, 就更完美了, 我一定打赏支持~~
ciaochaos
    85
ciaochaos  
OP
   2020-06-16 20:06:41 +08:00
@shoaly 将来会针对电商、自媒体、收款赞赏等场景做对应的模版,谢谢支持!
ufan0
    86
ufan0  
   2020-06-16 20:30:27 +08:00   ❤️ 1
页面效果很漂亮,请问是基于什么组件做的吗?
ciaochaos
    87
ciaochaos  
OP
   2020-06-16 21:10:09 +08:00
@ufan0 谢谢!二维码生成是基于 davidshimjs/qrcodejs 的常规生成算法改进的,其他的是我们自己基于 React 做的。
tinkerer
    88
tinkerer  
   2020-06-16 21:23:47 +08:00   ❤️ 1
starred
ciaochaos
    89
ciaochaos  
OP
   2020-06-16 21:25:34 +08:00
@tinkerer !!耶
L00kback
    90
L00kback  
   2020-06-17 09:27:42 +08:00   ❤️ 1
看到结尾两个大一学生所做,哭了,respect 。。。支持一下
ali0531
    91
ali0531  
   2020-06-17 11:48:39 +08:00   ❤️ 1
希望再出一个 VUE 版的
ciaochaos
    92
ciaochaos  
OP
   2020-06-17 14:56:00 +08:00 via iPhone
@ali0531 想要吗哈哈,等我大二做
d5
    93
d5  
   2020-06-17 15:31:27 +08:00   ❤️ 1
太酷了,点赞
ciaochaos
    94
ciaochaos  
OP
   2020-06-17 15:53:50 +08:00
@d5 :)
ciaochaos
    95
ciaochaos  
OP
   2020-06-17 17:50:23 +08:00
p.s. 网站新增一个圆角矩形的定位点样式,有着与 iOS 图标一致的曲率连续圆角,欢迎尝试 👏
realkun
    96
realkun  
   2020-06-18 18:06:26 +08:00   ❤️ 1
很好看 很艺术啊
ciaochaos
    97
ciaochaos  
OP
   2020-06-18 23:07:10 +08:00
@realkun 😉✌🏻
robinlovemaggie
    98
robinlovemaggie  
   2020-06-19 10:51:18 +08:00   ❤️ 1
头像背景那个示例好像识别不出来啊~
ciaochaos
    99
ciaochaos  
OP
   2020-06-19 11:00:29 +08:00
@robinlovemaggie 是用什么扫描的?多试试呗,识别不出来的原因有很多。期待反馈
ExploreWay
    100
ExploreWay  
   2020-06-19 11:10:55 +08:00   ❤️ 1
老哥,稳得很!
1  2  
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3830 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 28ms · UTC 03:53 · PVG 11:53 · LAX 19:53 · JFK 22:53
♥ Do have faith in what you're doing.