描述:前端生成二维码
一、页面
<canvas type="2d" style="width: 312px; height: 312px;" id="myQrcode"></canvas>
二、微信小程序
安装 weapp-qrcode-canvas-2d
官方文档传送门
const query = wx.createSelectorQuery()
query.select(canvasId)
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
// 调用方法drawQrcode生成二维码
drawQrcode({
canvas: canvas,
canvasId,
width,
padding: 0, // 码的白边
background: '#ffffff',
foreground: '#000000',
text: '这里是二维码上的内容',
}).then(res => {
wx.canvasToTempFilePath({
canvasId,
canvas: canvas,
x: 0,
y: 0,
width,
height,
destWidth: width,
destHeight: height,
success(res) {
console.log('二维码临时路径:', res.tempFilePath)
},
fail(err) {
console.error(err)
}
})
})
})
三、支付宝小程序
my.generateImageFromCode ({
code: '这里是二维码上的内容',
format: 'QRCODE',
width,
correctLevel: 'H',
codeColor: '#e70b0b',
backgroundColor: '#ffffff',
success: function (res) {
console.log('二维码临时路径:', res.image) // 这里是base64
},
fail: function (err) {
console.log (err)
}
})
四、注意:
1、画出的二维码大小如果跟设计稿的一样,需要各种计算,为了方便,我这里是直接用的image显示的路径,然后设置image的样式
2、支付宝生成的是base64
3、ios微信小程序报错 (in promise) MiniProgramError
{“errMsg”:“canvasToTempFilePath:fail image size is 0x0”}
Object
解决:发现是canvas写了display: none
4、如果需要隐藏canvas, 不能用display:none, 也不能用transform(会占位), 我用的是fixed