效果图(按钮,弹窗样式根据需要自行调整):
点击分享好友会直接触发微信的小程序分享,
点击保存图片会保存至相册,供发朋友圈使用;
注意:昵称,头像,二维码,海报底图背景都可以从接口获取动态绘制,
接口获取的图片src必须是https(开发版本可以用http),然后需要用wx.downLoad下载,然后使用临时地址来生成海报,否则会报错。
wx.downLoad({
url: 'https://。。。。',
success: function(res) {
that.setData({
headImg: res.tempFilePath, //res.tempFilePath即可使用,直接用网络图片会报错
})
}
})
wxml代码:
<view bindtap='shareTenant' style='display:flex;align-items:center;background:#fff;padding:1%;border-radius:109rpx;box-shadow:0rpx 0rpx 20rpx {{mainColor}};position:fixed;bottom:75px;z-index:999;right:40vw;'>
<text class='f12' style="color:{{mainColor}};">点击分享</text>
</view>
<canvas canvas-id="myCanvas" style="width:{{canvasw}};height:{{canvash}};" hidden='{{canvasHide}}' />
<view class='defaultMask' wx:if="{{showAction}}" bindtap='closeMask' catchtouchmove="stopPageScroll"></view>
<image src='{{shareImageSrc}}' wx:if="{{showAction}}" mode='widthFix' bindtap='closeMask' style='position:fixed;top:5vw;width:450rpx;left:150rpx;z-index:1001;' catchtouchmove="stopPageScroll"></image>
<view class='flex shareTenantAction' wx:if="{{showAction}}">
<button class='flex-item tc formButton' open-type='share' style='padding:0;margin:0;line-height:1.2;'>
<view class='f14'>分享好友</view>
</button>
<view class='flex-item tc' bindtap='saveImage'>
<view class='f14'>保存图片</view>
</view>
</view>
css样式
/**index.wxss**/
.shareTenantAction {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
z-index: 1002;
padding: 60rpx 0;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.flex {
display: flex;
}
.flex .flex-item {
flex: 1;
}
.defaultMask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
box-sizing: border-box;
}
js代码
//index.js
//获取应用实例
const app = getApp()
Page({
data: {},
onLoad: function() {
let that = this;
wx.getImageInfo({
src: '../../img/bg.png',
success(res) {
that.setData({
imageWidth: res.width / 2,
imageHeight: res.height / 2
})
}
})
},
//点击分享获取商家海报
shareTenant() {
wx.showLoading({
title: '海报生成中~',
})
setTimeout(function() {
wx.hideLoading()
}, 10000)
let that = this;
var headImg = '../../img/headImg.jpg';
let bg = '../../img/bg.png';
let code = '../../img/code.png';
let nickName = '知晓';
//如果图片是网络url的,要先用wx.downLoad下载,获取微信的临时地址图片再生成海报
// wx.downLoad({
// url: 'https://。。。。',
// success: function(res) {
// that.setData({
// headImg: res.tempFilePath, //res.tempFilePath即可使用,直接用网络图片会报错
// })
// }
// })
//设置canvas的大小,与海报底图大小保持一致
that.setData({
canvasHide: false,
canvasw: that.data.imageWidth + 'px',
canvash: that.data.imageHeight + 'px'
})
var w = that.data.imageWidth;
var h = that.data.imageHeight;
const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.fillRect(0, 0, w, h)
ctx.drawImage(bg, 0, 0, w, h) //商家海报底图
ctx.save();
ctx.drawImage(headImg, 0.09 * w, 0.78 * h, 0.12 * w, 0.12 * w) //头像
ctx.stroke();
ctx.closePath();
ctx.restore();
//canvas推荐人昵称头像填充
ctx.setTextAlign('center')
ctx.setFillStyle('rgb(0,0, 0)')
ctx.setFontSize(16)
ctx.fillText(nickName, 0.15 * w, 0.78 * h + 0.17 * w)
ctx.drawImage(code, 0.63 * w, 0.78 * h, 0.3 * w, 0.3 * w)
ctx.draw();
setTimeout(function() {
//将cavas变成图片
wx.canvasToTempFilePath({
//通过id 指定是哪个canvas
canvasId: 'myCanvas',
success(res) {
wx.hideTabBar()
wx.hideLoading()
that.setData({
canvasHide: true,
showAction: true,
shareImageSrc: res.tempFilePath
})
}
})
}, 500)
},
//关闭分享弹窗
closeMask() {
wx.showTabBar()
this.setData({
canvasHide: true,
showAction: !this.data.showAction
})
},
//保存图片
saveImage() {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImageSrc,
success: function(res) {
wx.showToast({
title: '图片已保存相册',
icon: 'success',
duration: 2000
})
},
fail: function(res) {}
})
}
})