评论

weapp-qrcode-canvas-2d在微信小程序中生成二维码,新版canvas-2d接口

weapp-qrcode-canvas-2d是使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包。canvas 2d 接口支持同层渲染且性能更佳,建议切换使用,可大幅提升速度

weapp-qrcode-canvas-2d

weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包。canvas 2d 接口支持同层渲染且性能更佳,建议切换使用,可大幅提升生成图片的速度。

仓库地址

测试环境

  • 微信小程序基础库版本:2.10.4
  • 开发者工具版本:Stable 1.03.2101150

Usage

先在 wxml 文件中,创建绘制的 canvas,并定义好 width, height, id , type ,其中type的值必须为2d

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

安装方法1:直接引入 js 文件

直接引入 js 文件,使用 drawQrcode() 绘制二维码

// 将 dist 目录下,weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变

import drawQrcode from '../../utils/weapp.qrcode.esm.js'

安装方法2:npm安装

npm install weapp-qrcode-canvas-2d --save

// 然后需要在小程序开发者工具中:构建npm

import drawQrcode from 'weapp-qrcode-canvas-2d'

安装完成后调用

例子1:没有使用叠加图片

const query = wx.createSelectorQuery()
query.select('#myQrcode')
    .fields({
        node: true,
        size: true
    })
    .exec((res) => {
        var canvas = res[0].node

        // 调用方法drawQrcode生成二维码
        drawQrcode({
            canvas: canvas,
            canvasId: 'myQrcode',
            width: 260,
            padding: 30,
            background: '#ffffff',
            foreground: '#000000',
            text: '大王顶真帅',
        })

        // 获取临时路径(得到之后,想干嘛就干嘛了)
        wx.canvasToTempFilePath({
            canvasId: 'myQrcode',
            canvas: canvas,
            x: 0,
            y: 0,
            width: 260,
            height: 260,
            destWidth: 260,
            destHeight: 260,
            success(res) {
                console.log('二维码临时路径:', res.tempFilePath)
            },
            fail(res) {
                console.error(res)
            }
        })
    })

例子2:使用叠加图片(在二维码中加logo)

const query = wx.createSelectorQuery()

query.select('#myQrcode')
    .fields({
        node: true,
        size: true
    })
    .exec(async (res) => {
        var canvas = res[0].node

        var img = canvas.createImage();
        img.src = "/image/logo.png"

        img.onload = function () {
            // img.onload完成后才能调用 drawQrcode方法

            var options = {
                canvas: canvas,
                canvasId: 'myQrcode',
                width: 260,
                padding: 30,
                paddingColor: '#fff',
                background: '#fff',
                foreground: '#000000',
                text: 'https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d',
                image: {
                    imageResource: img,
                    width: 80, // 建议不要设置过大,以免影响扫码
                    height: 80 // 建议不要设置过大,以免影响扫码
                    round: true // Logo图片是否为圆形
                }
            }

            drawQrcode(options)

            // 获取临时路径(得到之后,想干嘛就干嘛了)
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 600,
                destHeight: 600,
                canvasId: 'myQrcode',
                canvas: canvas,
                success(res) {
                    console.log('二维码临时路径为:', res.tempFilePath)
                },
                fail(res) {
                    console.error(res)
                }
            })

        };
    })

API

drawQrcode([options])

options

Type: Object

参数 必须 说明 示例
canvas 必须 画布标识,传入 canvas 组件实例
canvasId 绘制的canvasId 'myQrcode'
text 必须 二维码内容 https://github.com/DoctorWei/weapp-qrcode-canvas-2d
width 二维码宽度,与canvaswidth保持一致 260
padding 空白内边距 20
paddingColor 内边距颜色 默认与background一致
background 二维码背景颜色,默认值白色 '#ffffff'
foreground 二维码前景色,默认值黑色 '#000000'
typeNumber 二维码的计算模式,默认值-1 8
correctLevel 二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 } 1
image 在 canvas 上绘制图片,层级高于二维码,v1.1.1+版本支持。具体使用见:例子2 {imageResource: '', width:80, height: 80, round: true}
最后一次编辑于  02-16  
点赞 13
收藏
评论

26 个评论

  • 寻一
    寻一
    2021-01-28

    666,确实好用。

    2021-01-28
    赞同 4
    回复
  • 一只鱼🐟
    一只鱼🐟
    2021-01-28

    确实不错,已经在用在项目中了

    2021-01-28
    赞同 3
    回复
  • 清蒸鱼
    清蒸鱼
    2021-01-28

    WePY这个框架用的人多吗

    2021-01-28
    赞同 1
    回复
  • 肥肥
    肥肥
    2021-10-28

    有延迟,可能会生成出空白的二维码

    2021-10-28
    赞同 3
    回复 4
    • 林huaqi
      林huaqi
      05-09
      怎么解决空白问题? 延迟调用canvasToTempFilePath吗?
      05-09
      回复
    • Gration
      Gration
      05-25回复林huaqi
      不是延迟,二维码就没有在canvas里“画”出来。自己在代码调用一下draw()就好了
      05-25
      回复
    • 林huaqi
      林huaqi
      05-25回复Gration
      canvas 2d接口没有draw的
      05-25
      回复
    • Gration
      Gration
      05-25回复林huaqi
      我居然一开始就设置错了,但是莫名奇妙没延迟了。
      05-25
      回复
  • 王晨光
    王晨光
    2021-09-14

    使用这个二维码库,安卓测试没问题二维码可以正常使用,ios不行,不知道什么原因,二维码没有显示这个是怎么回事

    2021-09-14
    赞同 2
    回复 4
    • 白日梦想家
      白日梦想家
      2021-11-09
      好兄弟解决了吗我也是这个样子的问题咋搞呀
      2021-11-09
      回复
    • 老谢
      老谢
      04-01
      ios报错,说什么CAVANS不是构造函数
      04-01
      回复
    • 老谢
      老谢
      04-01
      已删除
      04-01
      回复
    • 缓流
      缓流
      05-08
      你试试用真机预览,不要用真机调试
      05-08
      回复
  • JasonChen
    JasonChen
    08-01

    使用 mate40Pro、一加9Pro 测试会生成空白二维码

    08-01
    赞同
    回复
  • 君安🐝
    君安🐝
    06-29

    请问这个可以生成一维码吗

    06-29
    赞同
    回复
  • A一只熊
    A一只熊
    06-17

    能否画多个图片?海报图+二维码图结合?

    06-17
    赞同
    回复 1
    • 收割机
      收割机
      06-18
      暂不支持
      06-18
      回复
  • DF
    DF
    06-15

    pc小程序 canvasToTempFilePath 失败且无反应

    06-15
    赞同
    回复
  • 应勇
    应勇
    06-12

    会生成空白二维码。

    建议:支持异步promise,可通过await等待返回

    06-12
    赞同
    回复 1

正在加载...

登录 后发表内容