文档地址
我是直接下载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: "/sucai_zs/images/145410-%E9%A6%96%E5%9B%BE.jpg",askName: "周某",askAvatar: "/sucai_zs/images/094058-1.jpg",answerName: "老师",answerAvatar: "/sucai_zs/images/094058-1.jpg",askText: "问题问题问题问题问题问题问题问题问题问题问题问题问题问题",answerText: "答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案",time: "_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: "/sucai_zs/images/095111-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]})},})
