效果如图
wxml
<button bindtap='saveImageToPhotosAlbum' class="save">生成图片</button>
<canvas canvas-id='share' wx:if="{
{canvasHidden}}" style='width:{
{screenWidth}}px;height:1500rpx; opacity: 0;'></canvas>
js
data: {
canvasHidden:false
},
// 线上的图片要先下载下来
wx.getImageInfo({ // 获取二维码到本地
src: 发请求后,后台返回的图片, 线上的图片,
success: function (res) {
// console.log(res.path)
_this.setData({
canvasCode: res.path
})
}
})
// 获取微信头像到本地
wx.getImageInfo({ // 小程序获取图片信息API
src: 发请求后,后台返回的图片,线上的微信头像,
success: function (res) {
_this.setData({
headImg: res.path
})
}
})
// 获取产品图
wx.getImageInfo({ // 小程序获取图片信息API
src:发请求后,后台返回的图片,
success: function (res) {
_this.setData({
detailsBanner: res.path
})
}
})
// 生成canvas图片
saveImageToPhotosAlbum: function () {
that.setData({
canvasHidden:true
})
var that = this;
var unit = that.data.screenWidth / 375
var avatarUrl = that.data.headImg
var banner = that.data.detailsBanner
var code = that.data.canvasCode
var canvaBg = '/images/share.bg.png'
var nickName = that.data.cacheMember.nickName
var context = wx.createCanvasContext(&#