我是直接下载github源码放到项目组件中
{
"usingComponents": {
"painter": "../../component/painter/painter"
}
}<view class="box">
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
<image mode="widthFix" src="{{image}}" bindtap="previewImg" />
<view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
</view>
纯Json驱动生成海报，使用很方便
Page({
data: {
template: {},
image: "",
width: 750,
height: 1200,
code: "https://sucai.suoluomei.cn/sucai_zs/images/20200509145410-%E9%A6%96%E5%9B%BE.jpg",
askName: "周某",
askAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",
answerName: "老师",
answerAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",
askText: "问题问题问题问题问题问题问题问题问题问题问题问题问题问题",
answerText: "答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案",
time: "2020_4_1"
},
onLoad() {
this.getDraw()
},
getDraw() {
wx.showLoading({
title: '正在努力生成中',
})
this.setData({
template: {
background: '#30C4A7',
width: this.data.width + 'px',
height: this.data.height + 'px',
views: [{
type: 'text',
text: this.data.askName + " @精致女主圈",
css: {
top: '30px',
left: '33px',
fontSize: '30px',
color: "#fff"
},
}, {
type: 'text',
text: "12580+人 都在这里提问",
css: {
top: '90px',
left: '33px',
fontSize: '28px',
color: "#fff"
},
}, {
type: 'image',
url: this.data.code,
css: {
top: '30px',
right: '30px',
width: '126px',
height: '126px',
borderRadius: '10px',
mode: "widthFix"
},
}, {
type: 'rect',
css: {
top: '180px',
left: this.data.width / 2 + "px",
width: '690px',
height: '1000px',
borderRadius: '10px',
color: '#fff',
align: 'center',
},
}, {
type: 'image',
url: this.data.askAvatar,
css: {
top: '230px',
left: '174px',
width: '100px',
height: '100px',
borderRadius: '50px',
mode: "aspectFill"
},
}, {
type: 'text',
text: this.data.askName,
css: {
top: '350px',
left: 690 / 2 - 125 + 'px',
fontSize: '30px',
color: "#000",
align: 'center',
},
}, {
type: 'image',
url: "https://sucai.suoluomei.cn/sucai_zs/images/20200523095111-54.png",
css: {
top: '280px',
left: '313px',
width: '123px',
mode: "widthFix"
},
}, {
type: 'text',
text: "提问",
css: {
top: '250px',
left: '347px',
fontSize: '30px',
color: "#000"
},
}, {
type: 'image',
url: this.data.answerAvatar,
css: {
top: '230px',
right: '174px',
width: '100px',
height: '100px',
borderRadius: '50px',
mode: "aspectFill"
},
}, {
type: 'text',
text: this.data.answerName,
css: {
top: '350px',
right: 690 / 2 - 125 + 'px',
fontSize: '30px',
color: "#000",
align: 'center',
},
}, {
type: 'text',
text: this.data.askText,
css: {
maxLines: 2,
lineHeight: "40px",
width: "629px",
top: '420px',
left: "60px",
fontSize: '30px',
color: "#000"
},
}, {
type: 'text',
text: this.data.answerText,
css: {
maxLines: 7,
lineHeight: "40px",
width: "629px",
top: '550px',
left: "60px",
fontSize: '30px',
color: "#000"
},
}, {
type: 'text',
text: this.data.time,
css: {
top: '850px',
right: "60px",
fontSize: '28px',
color: "#666666"
},
},
{
type: 'image',
url: this.data.code,
css: {
top: '900px',
left: this.data.width / 2 - 100 + 'px',
width: '200px',
height: '200px',
mode: "aspectFill"
},
},
{
type: 'text',
text: "长按或保存二维码查看原文",
css: {
top: '1120px',
left: this.data.width / 2 + 'px',
fontSize: '28px',
color: "#666666",
align: 'center',
},
},
],
}
})
},
// 生成成功
canvasSuc(e) {
console.log(e)
wx.hideLoading()
this.setData({
image: e.detail.path
})
},
getSave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.image,
success: (res) => {
wx.showToast({
title: '保存成功',
});
}
})
wx.getSetting({
success: (set) => {
if (set.authSetting['scope.writePhotosAlbum'] == false) {
wx.openSetting()
}
}
})
},
previewImg() {
wx.previewImage({
current: this.data.image,
urls: [this.data.image]
})
},
})
