需求实现步骤如下
- 先定义两个canvas
- 一个canvas myQrcode画二维码的图片
- 另一个canvas mycanvas画一个背景图,并把二维码画到这个canvas上,mycanvas这个canvas生成一张图片,返回图片的临时路径
- 最后保存图片到手机
首先wxml,新版微信小程序canvas要注意写 type="2d" id="XXX"
html
<canvas type="2d" style="width: 750rpx;height: 1260rpx;position:fixed;top: 1000px;left: 0px;z-index: 9999999999;" id="mycanvas"></canvas>
<canvas type="2d" style="width: 200rpx;height: 200rpx;position:fixed;top: 1000px;left: 0px;z-index: 9999999999;" id="myQrcode"></canvas>
画图
安装weapp-qrcode-canvas-2d
bash
npm install weapp-qrcode-canvas-2d --save
inviteBg是返回的微信临时图片地址
javascript
import {
loadImg
} from '../../utils/drawPoster'
Page({
onLoad(){
const ewmLink = getApp().api.requestBase + '/index?user_id=' + userInfo.userId;
const img = 'https://jingdong-sauce.oss-cn-beijing.aliyuncs.com/images/b49632186701d80f507a0b0930a34435.jpg'
loadImg('#mycanvas', '#myQrcode', ewmLink, img, this, (base64) => {
console.log(base64)
this.setData({
inviteBg: base64,
saveImgShow: true
})
})
}
})
先通过wx.createSelectorQuery(),查询到两个canvas
然后画二维码图片drawCode,并生成二维码临时图片canvasToTempFilePath
canvas1.createImage() ctx.drawImage(img, 0, 0, canvas1.width / 3, canvas1.height / 3); 将背景图片画到canvas1上
canvas1.createImage() ctx.drawImage(img2, canvas1.width / 6 - 70, 340, 140, 140) 将二维码图片画到canvas1上
wx.canvasToTempFilePath 生成canvas1背景图和二维码图片结合的临时图片并返回
drawPoster.js
javascript
import drawQrcode from 'weapp-qrcode-canvas-2d'
// 假设你已经引入了 qrcode.js
export function loadImg(canvasId1, canvasId2, ewmLink, imgUrl, context, callback) {
const query = wx.createSelectorQuery()
query.select(canvasId1).fields({
node: true,
size: true
})
query.select(canvasId2).fields({
node: true,
size: true
})
query.exec(async (res) => {
console.log(res)
const canvas1 = res[0].node
const canvas2 = res[1].node
// 调用方法drawQrcode生成二维码
let img2Src = await drawCode(canvas2, canvasId2, ewmLink)
console.log('img2Src', img2Src)
const ctx = canvas1.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas1.width = res[0].width * dpr
canvas1.height = res[0].height * dpr
ctx.scale(dpr, dpr)
const img = canvas1.createImage()
img.src = imgUrl
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas1.width / 3, canvas1.height / 3);
console.log(ctx)
const img2 = canvas1.createImage()
img2.src = img2Src
img2.onload = () => {
ctx.drawImage(img2, canvas1.width / 6 - 70, 340, 140, 140)
wx.canvasToTempFilePath({
canvasId: canvasId1,
canvas: canvas1,
x: 0,
y: 0,
width: 414,
height: 695,
destWidth: 414,
destHeight: 695,
success(res) {
console.log('合成图片路径', res.tempFilePath)
callback(res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
}
}
})
}
function drawCode(canvas, canvasId, ewmLink) {
return new Promise(async (resolve, reject) => {
await drawQrcode({
canvas: canvas,
canvasId: canvasId,
width: 200,
padding: 30,
background: '#ffffff',
foreground: '#000000',
text: ewmLink,
})
wx.canvasToTempFilePath({
canvasId: canvasId,
canvas: canvas,
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 260,
destHeight: 260,
success(res) {
resolve(res.tempFilePath)
console.log('二维码临时路径:', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
})
}
保存图片
点击保存图片,至此就能把这个图片保存到手机里啦
javascript
const query = wx.createSelectorQuery()
query.select('#mycanvas').fields({
node: true,
size: true
}).exec(res => {
wx.canvasToTempFilePath({
canvas: res[0].node,
success: function (res) {
console.log("uuuu22222")
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
console.log("33333")
wx.showToast({
title: '保存成功',
})
}
})
},
fail: function (res) {
console.log("444444")
console.log(res);
}
}, _this);
})