canvasToTempFilePath的官方文档写着在 draw()
回调里调用该方法才能保证图片导出成功。文档地址:wx.canvasToTempFilePath(Object object, Object this) | 微信开放文档
我在这里面使用的canva 获取canvas实例,使用的官方的代码。用一个变量canvas保存实例,后续保存时会调用。
data () {
return {
canvas: null // 实例
}
},
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
this.setData({
canvas
})
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
this.drawBg(canvas, ctx); // 绘制图片
})
},
引入图片需要调用canvas.createImage方法, 具体使用方法如下:
Image Canvas.createImage()
创建一个图片对象。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
drawBg (canvas, ctx) {
const img = canvas.createImage()
img.src = '/image/friend.jpg'
img.onload = () => {
ctx.drawImage(img, 0, 0, 500, 500);
}
},
保存时注意wx.canvasToTempFilePath要传递canvas参数,为canvas 2d 实例
canvas Object 否 画布标识,传入 canvas 组件实例 (canvas type=“2d” 时使用该属性)。
save () {
wx.canvasToTempFilePath({
canvas: this.data.canvas, // 使用2D 需要传递的参数
success(res) {
console.log(res.tempFilePath)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功,请在相册中查看',
})
}
})
}
})
}
})