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

[ciaochaos]

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

Github 仓库
github.com/ciaochaos/qrbtf

访问网站
qrbtf.com

图文介绍

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

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

！！！

你们要的 React 库来啦

Github
github.com/cpunisher/react-qrbtf

安装

npm install react-qrbtf --save

我们的二维码生成 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

[ciaochaos]

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

[theprimone]

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

[ciaochaos]

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

[theprimone]

发包记得用 ts 就行

[fakenews]

挺有意思，希望坚持下去

[ciaochaos]

@fakenews 谢谢！

[Leigg]

可以的，点赞

[xingyuc]

厉害厉害

[iapplebear]

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

[ciaochaos]

@iapplebear 是滴！

[chenliangngng]

可以可以

[hlayk]

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

[ciaochaos]

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

[MomoS]

一直想找这种工具

[qiayue]

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

[Sivan]

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

[ciaochaos]

@qiayue 被发现啦！感谢支持

[ciaochaos]

@Sivan 耶！

[kop1989]

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

[jimmy3780]

继续加油~支持一个

[hlayk]

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

[ciaochaos]

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

[violetlai]

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

[ciaochaos]

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

[unicloud]

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

[ciaochaos]

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

[simple11]

支持一下

[liyang5945]

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

[ciaochaos]

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

[whatsbug]

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

[ciaochaos]

@whatsbug Wow 这个也好棒！

[unicloud]

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

[zvcs]

太棒了，start

[ciaochaos]

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

[hujiev2]

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

[ciaochaos]

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

[leverestfish]

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

[ciaochaos]

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

[leverestfish]

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

[ciaochaos]

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

[leverestfish]

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

[bojue]

有意思

[ciaochaos]

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

[burnithecy]

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

[ciaochaos]

@burnithecy 来写几个样式～

[BlackHole1]

好棒啊，已 star 、感谢

[ciaochaos]

@BlackHole1 耶！开心

[leffz]

还不错哦，厉害

[auzeonfung]

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

[ciaochaos]

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

[indev]

挺漂亮的

[lblblong]

酷酷酷，喜欢

[Phuasheng]

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

[realpg]

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

[ciaochaos]

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

[ciaochaos]

@realpg 有没有效果图呀？

[EyreFree]

@whatsbug Wow 这个也好棒！🐶

[realpg]

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

[ciaochaos]

@realpg 哈哈没图没太懂

[godbmw]

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

[realpg]

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

[Norths]

很棒的想法

[zhw2590582]

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

[ciaochaos]

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

[muayang]

支持一下

[jiangzm]

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

[ciaochaos]

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

[lankaka]

棒棒哒 支持楼主

[doveyoung]

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

[ciaochaos]

@doveyoung 嘻嘻感谢！

[ciaochaos]

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

[theprimone]

阔以啊，这效率

[theprimone]

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

[JmmBite]

😊🥺😉😍😘😚😜😂😝😳😁😣😢 emoji 符号解析出来乱码。
貌似大多数的二维码都没有解决这个问题

[aaronysj]

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

[Msxx]

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

[ciaochaos]

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

[ciaochaos]

@JmmBite 我研究一下

[yuankui]

老铁，浪的一匹~

[ciaochaos]

@yuankui ✊🏻

[tinytin]

不错

[godgc]

挺有意思的～ 支持！

[ciaochaos]

@tinytin @godgc 谢谢！

[shoaly]

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

[ciaochaos]

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

[ufan0]

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

[ciaochaos]

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

[tinkerer]

starred

[ciaochaos]

@tinkerer ！！耶

[L00kback]

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

[ali0531]

希望再出一个 VUE 版的

[ciaochaos]

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

[d5]

太酷了，点赞

[ciaochaos]

@d5 :)

[ciaochaos]

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

[realkun]

很好看 很艺术啊

[ciaochaos]

@realkun 😉✌🏻

[robinlovemaggie]

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

[ciaochaos]

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

[ExploreWay]

老哥，稳得很！