文档
js源码
https://pan.baidu.com/s/10os-vr0mWsBwx08oXK2caQ
提取码: y1tw
我是直接下载github源码放到项目组件中
{"usingComponents": {"painter": "../../component/painter/painter"}
}
注意踩过的坑:下面painter 这行代码放在最外层,不能放在view弹窗里面,否则弹窗生成第二次生成的时候会破板.
<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: 1334,frameWidth: 690,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: '30px',width: this.data.frameWidth + 'px',height: '1000px',borderRadius: '10px',color: '#fff',},}, {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: this.data.frameWidth / 2 - 125 + 'px',fontSize: '30px',color: "#000",align: 'center',maxLines: 1,//限制行数},}, {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: this.data.frameWidth / 2 - 125 + 'px',fontSize: '30px',color: "#000",align: 'center',},}, {type: 'text',text: this.data.askText + this.data.answerText,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.getSetting({success: (set) => {wx.saveImageToPhotosAlbum({filePath: this.data.image,success: (res) => {if (res.errMsg == "saveImageToPhotosAlbum:ok") {wx.showToast({title: '保存成功',});}}})if (set.authSetting['scope.writePhotosAlbum'] == false) {wx.openSetting()}}})},previewImg() {wx.previewImage({current: this.data.image,urls: [this.data.image]})},
})