思路：在js中引入生成海報插件，配置posterConfig常量，點擊生成海報觸發生成海報事件onCreateOtherPoster，海報生成成功后將圖片賦值給彈框圖片，使海報以彈框形式顯示。
中引入生成海報插件，配置posterConfig常量，點擊生成海報觸發生成海報事件onCreateOtherPoster，海報生成成功后將圖片賦值給彈框圖片，使海報以彈框形式顯示。
步驟：
1、 引入生成海報插件，配置相關數據
2、 點擊分享按鈕觸發toggleAction事件，showàtrue顯示底部列表
//上拉菜單 選項列表 切換顯示/隱藏
toggle(type) {
this.setData({
[type]: !this.data[type]
});
},
toggleAction() {
this.toggle('show');
},
//關閉上拉菜單
onCloseActionSheet() {
this.setData({
show: false
});
},
//點擊 上拉菜單
onSelectActionSheet: function(e) {
var that = this;
//如果選擇了發送給朋友
if (e.detail.name == "發送給朋友") {
that.onCloseActionSheet();
}
if (e.detail.name == "生成海報") {
//關閉 上拉列表
that.onCloseActionSheet();
//調用生成海報的事件
that.onCreateOtherPoster();
}
},
3、點擊生成海報， onSelectActionSheet判斷后觸發生成海報事件，重新為海報賦值
//生成海報
onCreateOtherPoster() {
console.log("生成海報事件")
//顯示 生成中...彈窗提示
wx.showLoading({
title: '生成中...',
})
this.setData({
posterConfig: posterConfig.jdConfig
}, () => {
Poster.create(true); // 入參：true為抹掉重新生成
});
this.setData({
'posterConfig.images[1].url': this.data.detail.imgs_url[0], //重新賦值海報商品圖片
'posterConfig.texts[2].text': this.data.detail.goods_name, //重新賦值海報商品標題
'posterConfig.texts[3].text[1].text': '￥'+this.data.goods_price //重新賦值海報商品價格
}, () => {
Poster.create(true); // 入參：true為抹掉重新生成
});
console.log(this.data.posterConfig.images[1].url)
}
4、海報生成成功，點擊保存圖片按鈕，保存圖片到本地
附件：海報配置文件代碼
const posterConfig = {
jdConfig: {
width: 750,
height: 1000,
backgroundColor: '#fff',
debug: false,
preload: true,
blocks: [{
width: 690,
height: 808,
x: 30,
y: 183,
borderWidth: 2,
borderColor: '#f0c2a0',
borderRadius: 20,
},
{
width: 634,
height: 74,
x: 59,
y: 770,
backgroundColor: '#fff',
opacity: 0.5,
zIndex: 100,
},
],
texts: [{
x: 113,
y: 61,
baseLine: 'middle',
text: '潮汕瑪人店',
fontSize: 32,
color: '#8d8d8d',
},
{
x: 30,
y: 113,
baseLine: 'top',
text: '發現一個好物，推薦給你呀',
fontSize: 38,
color: '#080808',
},
{
x: 92,
y: 810,
fontSize: 38,
baseLine: 'middle',
text: '標題',
width: 570,
lineNum: 1,
color: '#222',
zIndex: 200,
},
{
x: 78,
y: 895,
baseLine: 'middle',
text: [{
text: '',
fontSize: 28,
color: '#ec1731',
},
{
text: '￥99',
fontSize: 36,
color: '#ec1731',
marginLeft: 30,
}
]
},
{
x: 522,
y: 895,
baseLine: 'middle',
text: '',
fontSize: 28,
color: '#929292',
},
{
x: 106,
y: 945,
baseLine: 'middle',
text: [{
text: '商家發貨&售后',
fontSize: 28,
color: '#929292',
},
{
text: '七天退貨',
fontSize: 28,
color: '#929292',
marginLeft: 50,
},
{
text: '運費險',
fontSize: 28,
color: '#929292',
marginLeft: 50,
},
]
},
{
x: 360,
y: 1065,
baseLine: 'top',
text: '長按識別小程序碼',
fontSize: 38,
color: '#080808',
},
{
x: 360,
y: 1123,
baseLine: 'top',
text: '超值好貨',
fontSize: 28,
color: '#929292',
},
],
images: [{
width: 62,
height: 62,
x: 30,
y: 30,
borderRadius: 62,
url: '/assets/img/logo1.jpg', //店鋪圖片
},
{
width: 645,
height: 645,
x: 59,
y: 210,
url: 'https://cdn-job1.phpyd.com/uploads/20190329/58f2f95a9ba484eb9ac85d1fe5ff6cc5.jpg', //海報圖
},
{
width: 220,
height: 220,
x: 92,
y: 1020,
url: 'https://cdn-job1.phpyd.com/uploads/20190403/fd1ab815e67a0ed0ccf22d13829a2b6d.jpg', //二維碼
}
// ,
// {
// width: 750,
// height: 90,
// x: 0,
// y: 1244,
// url: '/assets/img/share_bottom.png', //底部圖片
// }
]
},
demoConfig: {
width: 750,
height: 1000,
backgroundColor: '#fff',
debug: false,
blocks: [{
x: 0,
y: 10,
width: 750, // 如果內部有文字，由文字寬度和內邊距決定
height: 120,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 10,
borderColor: 'red',
backgroundColor: 'blue',
borderRadius: 40,
text: {
text: [{
text: '金額￥ 1.00',
fontSize: 80,
color: 'yellow',
opacity: 1,
marginLeft: 50,
marginRight: 10,
},
{
text: '金額￥ 1.00',
fontSize: 20,
color: 'yellow',
opacity: 1,
marginLeft: 10,
textDecoration: 'line-through',
},
],
baseLine: 'middle',
},
}],
texts: [{
x: 0,
y: 180,
text: [{
text: '長標題長標題長標題長標題長標題長標題長標題長標題長標題',
fontSize: 40,
color: 'red',
opacity: 1,
marginLeft: 0,
marginRight: 10,
width: 200,
lineHeight: 40,
lineNum: 2,
},
{
text: '原價￥ 1.00',
fontSize: 40,
color: 'blue',
opacity: 1,
marginLeft: 10,
textDecoration: 'line-through',
},
],
baseLine: 'middle',
},
{
x: 10,
y: 330,
text: '金額￥ 1.00',
fontSize: 80,
color: 'blue',
opacity: 1,
baseLine: 'middle',
textDecoration: 'line-through',
},
],
images: [{
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
width: 300,
height: 300,
y: 450,
x: 0,
// borderRadius: 150,
// borderWidth: 10,
// borderColor: 'red',
},
{
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
width: 100,
height: 100,
y: 450,
x: 400,
borderRadius: 100,
borderWidth: 10,
},
],
lines: [{
startY: 800,
startX: 10,
endX: 300,
endY: 800,
width: 5,
color: 'red',
}]
}
}
Git源代碼：https://gitee.com/DreamZHH/share_poster.git