目录
转载:
weapp-qrcode-canvas-2d在微信小程序中生成二维码,新版canvas-2d接口 | 微信开放社区
weapp-qrcode-canvas-2d
weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包。canvas 2d 接口支持同层渲染且性能更佳,建议切换使用,可大幅提升生成图片的速度。
仓库地址
使用
先在 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
在文件中引入
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])
Type: Object