点击分享按钮,生成海报

按钮调用的方法(http网络图片要使用getImageInfo转为本地路径再画):
BindShare: function (e) {
wx.showLoading({
title: '海报正在生成中......'
})
let that = this
let id = e.currentTarget.id // 文章id
that.setData({
iscode: true
})
// CANVAS 绘图
console.log("CANVAS 绘图:生成海报图片" + that.data.poster)
const ctx = wx.createCanvasContext('share');
wx.getImageInfo({
src: that.data.poster, // 服务器返回的图片地址
success: function (res) {
console.log("绘制临时海报:" + res.path)
let path = res.path;
ctx.drawImage(path, 0, 0, 450, 700, 0, 0, 360, 560); //绘制海报图片
wx.getImageInfo({
src: that.data.qrcode,
success(ret){
console.log("绘制临时二维码:" + ret.path)
let path = ret.path;
ctx.drawImage(path, 270, 470, 80, 80); //绘制二维码
ctx.draw(true, function () {
// canvas画布转成图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 360,
height: 570, // 560
destWidth: 360,
destHeight: 570, // 560
canvasId: 'share',
success(res) {
wx.hideLoading()
console.log("画布转成图片:" + res.tempFilePath);
that.setData({
sharePic: res.tempFilePath
})
},
fail(res) {
console.log(res)
}
})
})
}, fail(ret){
console.log("绘制临时二维码失败:")
console.log(ret)
}
})
},fail(res){
console.log("绘制临时海报失败:")
console.log(res)
}
})
},
点击保存图片所调用的方法:
/**
* 分享到朋友圈 并 保存图片
*/
BindSave: function (e) {
let that = this
wx.showLoading({
title: '图片保存中......'
})
console.log("保存海报图片")
wx.saveImageToPhotosAlbum({
filePath: that.data.sharePic,
success (res) {
wx.hideLoading()
wx.showToast({
title: '已保存至相册',
})
setTimeout(function () {
wx.hideLoading()
}, 1000)
},fail (res) {
wx.hideLoading()
wx.showLoading({
title: '已取消保存',
})
setTimeout(function () {
wx.hideLoading()
}, 1000)
}
})
},
文章评论 (0)