目录
转载：
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
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
