实现的页面：
首先下载组件wxa-plugin-canvas
1.在.json文件中usingComponents
{
"usingComponents": {
"poster": "../../miniprogram_dist/poster"
},
"navigationBarTitleText": "名片推广",
"navigationBarBackgroundColor": "#333c4d"
}
2.wxml页面中使用poster组件
*注：因使用该组件中有原生组件canvas，所以其他组件被canvas组件遮住，必须使用cover-view或者cover-image才可以在canvas上显示 比如第一张图片上的保存至相册和生成推广码
<poster id="poster" config="{
{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
</poster>
<cover-view class="savetoA">
<cover-view class="img_btn" bindtap="savetoA">
<cover-image src="../../img/down.png" class="iconfont"></cover-image>
<cover-view>保存至相册</cover-view>
</cover-view>
<cover-view class="img_btn" bindtap="getimg">
<cover-image src="../../img/look.png" class="iconfont"></cover-image>
<cover-view>生成推广码</cover-view>
</cover-view>
</cover-view>
3.wxss
page {
background: #333c4d;
width: 100%;
height: 100%;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999 !important;
}
.savetoA {
width: 100%;
position: fixed;
bottom: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
z-index: 99999 !important;
box-sizing: border-box;
}
.img_btn {
width: 45%;
padding: 20rpx 0;
text-align: center;
color: #fff;
font-size: 30rpx;
border-radius: 40rpx;
}
.img_btn .iconfont {
width: 50rpx;
height: 50rpx;
margin: 0 auto 10rpx;
}
4.js
1>先引入poster.js
import api from "../../utils/api.js"
import Utils from "../../utils/util.js"
import Poster from '../../miniprogram_dist/poster/poster';
Page({
/**
* 页面的初始数据
*/
data: {
userinfo: {},
QRcode_img: '',
posterConfig: {},
savepic: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
var that = this;
wx.getStorage({
key: 'userinfo',
success: function(res) {
usercode = res.data.UserCode;
that.loadmyinfo()
},
fail: function(err) {
wx.reLaunch({
url: '/pages/login/login',
})
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
loadmyinfo() {
var that = this
api.get("mpapi/user.ashx", {
action: 'LoadMyInfoByCode',
usercode: usercode
}).then((res) => {
if (res.Success) {
that.setData({
userinfo: res.Data
})
that.loaddetail()
}
})
},
loaddetail() {
var that = this
api.get("mpapi/share.ashx", {
action: 'myshare',
usercode: usercode,
stype: 1
}).then((res) => {
if (res.code == 1) {
that.setData({
QRcode_img: res.imgurl
})
that.onCreatePoster()
}
})
},
/**
* 异步生成海报
*/
onCreatePoster() {
var that = this;
// setData配置数据
that.setData({
posterConfig: {
width: 750,
height: 1334,
debug: true,
pixelRatio: 1000,
preload: false,
hideLoading: false,
backgroundColor: '#333c4d',
blocks: [{
x: 30,
y: 150,
width: 690,
height: 1000,
backgroundColor: '#ffffff',
zIndex: 1,
borderRadius: 20,
}],
texts: [{
x: 60,
y: 195,
baseLine: 'middle',
text: that.data.userinfo.companyname,
fontSize: 26,
textAlign: 'left',
color: '#B0B6B8',
zIndex: 2,
}, {
x: 60,
y: 250,
baseLine: 'middle',
text: that.data.userinfo.empName,
fontSize: 42,
fontWeight: 'bold',
textAlign: 'left',
color: '#32363C',
zIndex: 2,
}, {
x: 60,
y: 310,
baseLine: 'middle',
text: that.data.userinfo.zhiwu,
fontSize: 36,
textAlign: 'left',
color: '#585858',
zIndex: 2,
}, {
x: 60,
y: 400,
baseLine: 'middle',
text: that.data.userinfo.Phone,
fontSize: 26,
textAlign: 'left',
color: '#6C7072',
zIndex: 2,
}, {
x: 60,
y: 450,
baseLine: 'middle',
text: that.data.userinfo.email,
fontSize: 26,
textAlign: 'left',
color: '#B0B0B0',
zIndex: 2,
}, {
x: 60,
y: 521,
baseLine: 'middle',
text: that.data.userinfo.homeaddress,
fontSize: 26,
textAlign: 'left',
color: '#B0B6B8',
zIndex: 2,
}, {
x: 240,
y: 990,
baseLine: 'middle',
text: '长按二维码 分享给好友',
fontSize: 26,
textAlign: 'left',
color: '#B0B6B8',
zIndex: 2,
}, {
x: 100,
y: 1125,
baseLine: 'middle',
text: '用科技 让业绩倍倍增',
fontSize: 26,
textAlign: 'left',
color: '#B0B6B8',
zIndex: 2,
}],
lines: [{
startX: 62,
startY: 340,
endX: 95,
endY: 340,
width: 5,
color: '#4C8CEF',
zIndex: 2,
}, {
startX: 60,
startY: 480,
endX: 690,
endY: 480,
width: 2,
color: 'rgba(123,126,128,0.15)',
zIndex: 2,
}, {
startX: 30,
startY: 560,
endX: 720,
endY: 560,
width: 2,
color: 'rgba(123,126,128,0.15)',
zIndex: 2,
},
// {
// startX: 186,
// startY: 1122,
// endX: 192,
// endY: 1122,
// width: 6,
// color: '#B0B6B8',
// zIndex: 2,
// }
],
images: [{
x: 190,
y: 220,
url: 'https://xxx.xxxxx.cn/xx/Uploads/20200329164509.png',
width: 50,
height: 50,
zIndex: 2
}, {
x: 500,
y: 230,
url: that.data.userinfo.HeadImg,
width: 183,
height: 183,
borderRadius: 183,
zIndex: 2
}, {
x: 185,
y: 610,
url: that.data.QRcode_img,
width: 380,
height: 380,
zIndex: 2
}, {
x: 60,
y: 1110,
url: "../../img/logo-3.png",
width: 30,
height: 25,
zIndex: 2
}]
}
}, () => {
Poster.create();
});
},
onPosterSuccess(e) {
const {
detail
} = e;
console.log(detail)
this.setData({
savepic: detail
})
},
savetoA() {
var that = this;
wx.getSetting({
success(res) {
wx.hideLoading();
if (!res.authSetting['scope.writePhotosAlbum']) {
//请求授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
//获得授权，开始下载
that.downloadfile()
},
fail() {
wx.showModal({
title: '',
content: '保存到系统相册需要授权',
confirmText: '授权',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum'] === true) {
that.downloadfile()
}
}
})
}
},
fail() {
wx.showToast({
title: '打开设置页失败',
icon: 'none',
})
}
})
}
})
} else {
//已有授权
that.downloadfile()
}
},
fail() {
wx.hideLoading();
wx.showToast({
title: '获取授权失败',
icon: 'none',
})
}
})
},
downloadfile() {
var that = this;
wx.saveImageToPhotosAlbum({
filePath: that.data.savepic,
success(res) {
api.showToast("保存至相册成功")
wx.previewImage({
current: that.data.savepic,
urls: [that.data.savepic]
})
},
fail() {
api.showToast("保存至相册失败")
}
})
},
getimg() {
var that = this;
wx.previewImage({
current: that.data.savepic,
urls: [that.data.savepic]
})
}
})
生成推广码点击后预览图片
