<view class="container log-list">
<canvas type="2d" id="myCanvas" style="width: 400px; height: 500px;"></canvas>
<button type="primary" bindtap="handleExport">保存为图片</button>
</view>
const util = require('../../utils/util.js')
Page({
onReady() {
},
handleExport() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
const bg = canvas.createImage()
bg.src = 'https://game.gtimg.cn/images/lol/act/img/skin/big516000.jpg';
bg.onload = (res) => {
ctx.drawImage(bg, 0, 0, 700, 600)
ctx.fillStyle = "#000000"
ctx.font = "50px sans-serif"
ctx.fillText("微信小程序海报分享",40, 800, 200)
}
const QrCode = canvas.createImage()
QrCode.src = 'https://src.onlinedown.net/images/xcs/10/2017-09-21_59c373d905179.jpg'
QrCode.onload = () => {
ctx.drawImage(QrCode, 300, 800, 200, 200)
}
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 500,
height: 700,
destWidth: 500,
destHeight: 700,
canvas: canvas,
success(res) {
console.log(res,'导出图片成功')
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(info) {
console.log(info)
}
})
},
fail(err) {
console.log(err)
}
})
},500)
})
}
})