V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
50vip
V2EX  ›  分享创造

又做了一个开源的 二维码 的库 ^_^

  •  
  •   50vip · 2020-12-25 09:42:16 +08:00 · 3304 次点击
    这是一个创建于 1430 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最终产出了一个 G2Plot 的开源扩展包 G2Plot-QRCode,欢迎试用和 star 。

    预览效果来一个如下:

    image

    使用方式

    import { G2Plot } from '@antv/g2plot';
    import { adaptor, defaultOptions } from 'g2plot-qrcode';
    
    const qr = new G2Plot('container', {
      // 二维码文本
      data: 'Hello, g2plot qrcode!',
      // 间距
      padding: 8,
      // 宽高
      width: 120,
      height: 120,
      // 背景前景颜色
      backgroundColor: 'white',
      foregroundColor: 'black',
      typeNumber: 0,
      correctLevel: 'H', // L M H Q
      // 样式自定义
      pixelStyle: (pixelData) => ({}),
      icon: {},
    }, adaptor, defaultOptions);
    
    qr.render();
    

    功能

    1. 常规二维码库能力都支持,支持宽高 padding 等基础配置
    2. 支持自定义前景背景
    3. 支持自定义 detection position 的样式(颜色、描边、渐变等)
    4. 支持 icon 以及大小
    5. 交互事件(二维码不再是静态图)

    还能做什么?

    理论上还能做到更加炫酷,比如:

    • 单元格的图形形状
    • 背景色
    • 出场动画

    当然这些还没有做。(: 逃

    哦,对了, 还有 G2Plot 的开源地址。

    16 条回复    2020-12-29 15:51:21 +08:00
    zitup
        1
    zitup  
       2020-12-25 11:32:09 +08:00
    二维码可以无感嵌入到壁纸中吗,自动适应壁纸的色系,嵌入到角落
    imgbed
        2
    imgbed  
       2020-12-25 12:09:14 +08:00
    imgbed
        3
    imgbed  
       2020-12-25 12:09:31 +08:00
    这个二维码生成器不错 tools.qvdd.cn/qrcode-maker
    网上看到的源码,直接搬运的
    50vip
        4
    50vip  
    OP
       2020-12-25 12:57:18 +08:00
    @zitup 只要代码从壁纸中提取主题色,然后设置颜色就可以了!
    50vip
        5
    50vip  
    OP
       2020-12-25 12:58:19 +08:00
    @imgbed 表示打不开
    50vip
        6
    50vip  
    OP
       2020-12-25 13:00:46 +08:00
    @imgbed 打开了,但是存在一些问题哈,就是没有办法去自定义 识别区的颜色,而只能设置前景、背景色,不好看~
    treblex
        7
    treblex  
       2020-12-25 13:10:45 +08:00
    @imgbed #3 挺棒的 学到了二维码的新用法 哈哈,国内的一般都只支持自家 app 扫了,一直以为只有链接和文本
    imgbed
        8
    imgbed  
       2020-12-25 14:07:39 +08:00
    @50vip 这个确实功能简单,只作为普通用
    lambdafate
        9
    lambdafate  
       2020-12-25 15:27:55 +08:00
    真巧,我的毕设选的二维码编解码,到时候可以参考你这个,狗头.jpg
    50vip
        10
    50vip  
    OP
       2020-12-25 17:26:12 +08:00
    @lambdafate 我这个不包含编码解码,不过依赖了二维码编码的模块,可以去参考。
    xiaoqiao24
        11
    xiaoqiao24  
       2020-12-25 17:48:13 +08:00
    py 版啥时候能出呢?
    chotow
        12
    chotow  
       2020-12-25 17:58:51 +08:00 via iPhone
    生成二维码的经常看到,识别二维码的会少一点,识别二维码并能给出定位坐标的就更少了… 想要最后一种(用于自动裁剪)。
    50vip
        13
    50vip  
    OP
       2020-12-28 11:40:10 +08:00
    @xiaoqiao24 为啥需要 py 版本?
    50vip
        14
    50vip  
    OP
       2020-12-28 11:40:31 +08:00
    @chotow 能细说一下识别之后,怎么裁剪吗?用来干啥?
    chotow
        15
    chotow  
       2020-12-28 12:53:03 +08:00
    @50vip #14 返回 Finder Pattern 外边的位置,裁剪出中间的单独二维码;举例,一张包含了二维码的完整图片(比如手机截图),自动对其裁剪,去除无用的区域,输出纯粹的二维码。
    kim886
        16
    kim886  
       2020-12-29 15:51:21 +08:00
    牛皮,赞一个
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   918 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 21:10 · PVG 05:10 · LAX 13:10 · JFK 16:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.