// 效果图
代码
<template>
<view class="page-class bg-page">
// 利用canvas 最终 生成图片
<canvas class="poster-wrapper" canvas-id="shareCanvas"></canvas>
<view class="footer-info">
<view class="share-content-main flex">
<view class="share-content-item" @click="wechatFriend('WXSceneSession')">
<view class="iconfont iconweixin"></view>
<view>邀请微信好友</view>
</view>
<view class="share-content-item" @click="saveImg">
<view class="iconfont iconbaocuntu"></view>
<view>保存到相册</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
teamName: '',
inviteCode: '',
photo: '',
qrImg: '/static/images/zhengmian4.png'
};
},
onLoad(options) {
this.teamName = options.teamName;
if (uni.getStorageSync('userInfo')) {
this.inviteCode = '邀请码:' + uni.getStorageSync('userInfo').userInfo.codeV1;
let userPhoto = uni.getStorageSync('userInfo').serviceUser.photo;
this.photo = userPhoto && userPhoto != '' ? userPhoto : this.$morenTouxiang;
setTimeout(() => {
this.shareClick();
});
}
},
methods: {
shareClick() {
let that = this;
const ctx = wx.createCanvasContext('shareCanvas');
uni.getSystemInfo({
success: function(respro) {
// 绘制白色背景
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, respro.windowWidth - 60, 425);
// 绘制头像
ctx.drawImage(that.photo, (respro.windowWidth - 140) / 2, 40, 80, 80);
ctx.setFontSize(18);
// 绘制昵称
//ctx.measureText(that.teamName).width) / 2 实现文字居中 在app端无效
//结果改为
ctx.fillText(that.teamName, (respro.windowWidth - 60 - ctx.measureText(that.teamName).width) / 2, 146);
ctx.setFontSize(16);
ctx.setFillStyle('#666');
ctx.fillText(that.inviteCode, (respro.windowWidth - 60 - ctx.measureText(that.inviteCode).width) / 2, 190);
ctx.drawImage(that.qrImg, (respro.windowWidth - 190) / 2, 217, 130, 130);
ctx.setFontSize(16);
ctx.setFillStyle('#222');
ctx.fillText('扫描二维码加入团队', (respro.windowWidth - 60 - ctx.measureText('扫描二维码加入团队').width) / 2, 380);
ctx.draw();
// ctx.stroke();
// ctx.draw(false, () => {
// uni.hideLoading();
// });
}
});
},
// 保存图片将 canvas 绘制出 图片路径
saveImg() {
// #ifdef APP-PLUS
uni.showLoading({
title: '正在保存...',
mask: true
});
let that = this;
uni.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: res => {
that.savePic(res.tempFilePath);
},
fail: function() {
uni.hideLoading();
//TODO
}
});
// #endif
},
//保存
savePic(filePath) {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function() {
uni.showToast({
title: '已保存系统相册',
duration: 2000
});
},
fail: function(e) {
uni.showToast({
title: '失败',
duration: 2000
});
//TODO
},
complete: function() {
// uni.hideLoading();
}
});
}
}
};
</script>