通过getImageInfo获取图片信息, canvasToTempFilePath要放在draw方法的回调中,并通过settimeout设置一定的延迟时间,否则会生成透明图片
function(){
wx.getImageInfo({
src: 'http://benditoutiao.oss-cn-hangzhou.aliyuncs.com/fore-end/firstblood/logo-2x.png',
success: (res) => {
const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage(res.path, 0, 0, 400, 600)
ctx.setTextAlign('center')
ctx.setFillStyle('#000000')
ctx.setFontSize(50)
ctx.fillText('Hello', 100, 100)
ctx.fillText('MINA', 100, 200)
ctx.stroke()
ctx.draw(false, setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
this.setData({
showShareImg:true,
shareImg: res.tempFilePath,
});
},
fail: function (err) {
console.log('失败')
console.log(err)
}
})
}, 100));
}
})
}
//调用saveImage方法,将图片储存到用户相册中
wx.saveImageToPhotosAlbum({
filePath:this.data.shareImg,
success:(res)=>{
wx.showModal({
title: '存图成功',
content: '图片成功保存到相册',
showCancel:false,
confirmText:'确定',
confirmColor:'#72B9C3',
success: res=> {
if (res.confirm) {
console.log('用户点击确定');
}
this.setData({
showShareImg:false,
})
}
})
}
})
网友评论