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

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

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

用 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
第 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  
    ❮ ❯
    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 Node Package 来了！ github.com/cpunisher/react-qrbtf
    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   ·   实用小工具   ·   1711 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 16:43 · PVG 00:43 · LAX 08:43 · JFK 11:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.