微信小程序生成(painter)海报

这是我目前接触到的比较好用的海报插件了
官方还有wxml-to-canvas 不会用有很多标签样式上不去
界面化生成,可以直接布局
GitHub 地址这个案例可以直接下载然后打开就是一个小程序，很明了的一个示例
这是作者在微信平台那么的一个贴算是

现在知道的一个无法生效的样式一些对齐的样式无法生效
海报中的大部分元素还是要自己通过定位样式去设置位置的
关于文字居中，需要通过计算文本的长度去实现

// 用来计算根据不同的文本长度去偏移不同的量
/*left:当前的默认忽略文本长度默认的偏移值fontSize:文本的字体大小length:文本长度返回值:根据当前文本长度计算出的偏移量
*/
function countLeft(left,fontSize,length){return left - (fontSize / 2 * length) + 'px'
}
// 如果要在画布上渲染图片的话 ，canvas不允许加载跨域资源，为了防止画布污染 哪里的画布都一样 很蛋疼
// 所有要把网络请求来的图片处理成本地地址，就不会有跨域问题了
// 直接放到项目里的图片就不用处理直接就可以用let getImage = (url) => {return new Promise((r,j) => {wx.getImageInfo({src: url,success:(e) => {r(e.path)}}) }) }
// 使用例子
async function(){var loactionImage = await getImage('网络图片链接')
}
// 也可以直接把要用到图片直接的本地地址直接缓存到storage缓存里面

这是我的部分代码

Component({properties: {//属性值可以在组件使用时指定imageDate:{type:Object,value:{}},actions:{type:Object,value:{}},info:{type:Object,value:{}},isCanDraw: {type: Boolean,value: false,observer(newVal, oldVal) {newVal && this.drawPic()}}},data: {isModal: false, //是否显示拒绝保存图片后的弹窗imgDraw: {}, //绘制图片的大对象sharePath: '', //生成的分享图visible: false},methods: {drawPic() {let mydate = this.data.actions.filter((ele,index) => {if(index < 6){return ele}})console.log(mydate)wx.getSystemInfo({success(res) {console.log(res.model)}})if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制this.setData({visible: true})this.triggerEvent('initData')return}wx.showLoading({title: '生成中'})let makeArr = (i,ele) => [[{"type": "rect","css": {"background": "#211F24","width": "680px","height": "90px","top": (388 + 120 * i) + "px","left": "34px","rotate": "0","borderRadius": "8px","borderWidth": "2px","borderColor": "#736B5E","shadow": "","color": "#211F24"}},{"type": "text","text": ele.actionName,"css": {"color": "#fff","background": "rgba(0,0,0,0)","width": "230px","height": "37.18000000000001px","top": (418 + 120 * i) + "px","left": "48px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "26px","fontWeight": "normal","maxLines": "1","lineHeight": "37.51800000000001px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": `重量(KG):${ele.weight}   数量(个):${ele.number}`,"css": {"color": "#9C8D76","background": "rgba(255,255,0,0)","width": "420px","height": "37.18000000000001px","top": (418 + 120 * i) + "px","left": "291px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "26px","fontWeight": "normal","maxLines": "1","lineHeight": "37.51800000000001px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},]]// arrlet getImage = (url) => {return new Promise((r,j) => {wx.getImageInfo({src: url,success:(e) => {console.log(e)r(e.path)}}) }) }let myavater;let imgDraw = {"width": "750px","height": "1280px","background": "/image/background.jpg","views": [{"type": "text","text": this.data.info.name,"css": {"color": "#CC9F5A","background": "rgba(0,0,0,0)","width": "180px","height": "42.89999999999999px","top": "174px","left": 375 + - (this.data.info.name.length * 15) + "px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "1","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "image","url": wx.getStorageSync('headPortrait'),"css": {"width": "131px","height": "131px","top": "9px","left": "318px","rotate": "0","borderRadius": "134px","borderWidth": "3px","borderColor": "#CC9F5A","shadow": "","mode": "scaleToFill"}},{"type": "image","url":'/image/qeur.jpg',"css": {"width": "118px","height": "118px","top": "1110px","left": "588px","rotate": "0","borderRadius": "0","borderWidth": "4px","borderColor": "#CC9F5A","shadow": "","mode": "scaleToFill"}},{"type": "text","text": "今天训练容量 (KG)：" + this.data.info.rongliang,"css": {"color": "#fff","background": "rgba(0,0,0,0)","width": "720px","height": "42.89999999999999px","top": "326px","left": "30px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "2","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},{"type": "text","text": "在****已经坚持"+ this.data.info.count +"天","css": {"color": "#CC9F5A","background": "rgba(0,0,0,0)","width": "340px","height": "42.89999999999999px","top": "231px","left": "210px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","padding": "0px","fontSize": "30px","fontWeight": "normal","maxLines": "2","lineHeight": "43.290000000000006px","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "center"}},]}console.log(imgDraw.views)mydate.forEach((ele,i) => {makeArr(i,ele).forEach(ele => {imgDraw.views.push(...ele)})})this.setData({imgDraw:imgDraw})},onImgErr(e) {wx.hideLoading()wx.showToast({title: '生成分享图失败，请刷新页面重试'})},onImgOK(e) {wx.hideLoading()this.setData({sharePath: e.detail.path,visible: true,})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData')},preventDefault() { },// 保存图片savePhoto(path) {wx.showLoading({title: '正在保存...',mask: true})this.setData({isDrawImage: false})wx.saveImageToPhotosAlbum({filePath: path,success: (res) => {wx.showToast({title: '保存成功',icon: 'none'})setTimeout(() => {this.setData({visible: false})}, 300)},fail: (res) => {wx.getSetting({success: res => {let authSetting = res.authSettingif (!authSetting['scope.writePhotosAlbum']) {this.setData({isModal: true})}}})setTimeout(() => {wx.hideLoading()this.setData({visible: false})}, 300)}})}}
})

目前微信小程序已经可以直接分享到朋友圈了
可以参考我这个文章

微信小程序生成(painter)海报相关推荐

uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
微信小程序生成清晰海报并保存到本地
一.导读小程序海报分享功能还是很常用,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈.今天这里介绍自己如果生成的,有源码 ...
微信小程序生成分享海报组件
效果图官方文档地址你看着!!! 代码文档上都有这里面有个坑这里面的像素单位是像素点是iOS的像素比 wxml  <view class=& ...
微信小程序生成分享海报完美解决
可以相信我说的话,但不要当真. 官方文档地址代码文档上都有这里面有个坑这里面的像素单位是像素点是iOS的像素比  <view class= ...
微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
微信小程序生成二维码带参海报
微信小程序生成二维码带参海报没错,就是用 canvas 来实现文章目录微信小程序生成二维码带参海报获取屏幕分辨率比生成二维码获取网络图片并转为本地临时文件绘制背景图片以及二维码代码片段 ...
小程序生成分享海报，带小程序码，并保存图片
小程序生成分享海报,带小程序码话不多说,先上效果图效果图不是重点,海报基本都是大同小异,都是一些信息,加上一个小程序码,重点是如何将所有要素整合成跟效果图一样的图片.我们知道如果是H5的话,有ht ...
【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景调用微信小程序生成二维码接口,提示报错错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...

微信小程序生成(painter)海报

微信小程序生成(painter)海报相关推荐

最新文章

热门文章