微信小程序使用Painter组件生成海报

文档地址

我是直接下载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]})},
})

微信小程序使用Painter组件生成海报相关推荐

微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
微信小程序分享朋友圈生成海报
微信小程序实现分享到朋友圈分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈.最近项目有这个需求, 于是就记录一下.(老规矩,我的博客复制粘贴就好使) 如果想 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...

微信小程序使用Painter组件生成海报

微信小程序使用Painter组件生成海报相关推荐

最新文章

热门文章