7 Star 80 Fork 20

WeiDoctor / weapp-qrcode-canvas-2d

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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((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: 'abc123',
                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 必须 二维码内容 'abc123'
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}

TIPS

weapp-qrcode-canvas-2d 参考以下源码

MIT License Copyright (c) 2021 DoctorWei Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码的js包。canvas 2d 接口支持同层渲染且性能更佳,可大幅提升生成图片的速度。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d.git
git@gitee.com:WeiDoctor/weapp-qrcode-canvas-2d.git
WeiDoctor
weapp-qrcode-canvas-2d
weapp-qrcode-canvas-2d
master

搜索帮助

14c37bed 8189591 565d56ea 8189591