前言

最近发现之前做的小程序海报功能突然无法保存和显示，在一些手机上面会出现海报闪烁问题，而且保存后是一片空白。一开始我以为是手机兼容性问题，但是我通过几部测试机，发现同款手机，有些会出现问题，有些不会。找了好久的问题，后来想是不是上传的图片的太大问题，然后百度了一下，发现需要先将网络图片下载再进行海报的生成，我试了一下，完美解决问题。
虽然说是解决了，但还是不清楚同款手机上，有些会有问题，我猜测可能也和手机性能有关。下面就是mpvue使用painter的具体实现，主要是将一张背景图片和一张二维码合成一张海报。

海报实现

painter的使用非常简单，只需要一串json数据就可以生成海报，而且提供@imgOK回调来获取生成后的海报路径。

一、首先引入painter

可以先去GitHub上面直接下载，最好放在static 里

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git static/painter

然后在需要使用的mpvue页面上引入

  usingComponents: {'painter': '/static/painter/painter'}

二、painter的使用

在页面上使用

      <div class="painter-pic"><painterv-if="Object.keys(templateJson).length!=0"@imgOK="onImgOk":imgErr="onImgErr":palette="templateJson"/><div class="save-btn" @click="save()">保存图片</div></div>

主要是图片的下载，我将两张网络图片在进入页面时就进行下载

 onLoad: function(options) {let data=JSON.parse(decodeURIComponent((options.item)));var seft=this //下载背景图wx.downloadFile({url:data.posterSetupId.posterPhoto,success(res){seft.posterPhoto=res.tempFilePath}})//下载二维码图片wx.downloadFile({url:data.qrcodePath,success(res){seft.qrcodePath=res.tempFilePath}})this.getSharePic()},

然后写个定时器判断图片是否下载成功，成功就开始绘制海报

      getSharePic(){wx.showLoading({title: "正在生成海报",mask: true});//海报动态生成，需要判断图片是否下载到本地再进行渲染this.timeOut=setInterval(() => {this.createPoster() //绘制海报}, 1500);},//绘制海报createPoster() {this.templateJson= {};// 绘制样式，判断图片是否已经生成if(this.posterPhoto && this.qrcodePath){this.templateJson= {background: "#ffffff",width: "548rpx",height: "883rpx",views: [{type: "image",url: this.posterPhoto,css: {top: "0rpx",left: "0rpx",width: "548rpx",height: "883rpx"}},{type: "image",url: this.qrcodePath,css: {top: "740rpx",right: "25rpx",width: "120rpx",height: "120rpx"}}]};//将加载框和定时器关掉wx.hideLoading();clearInterval(this.timeOut)}else{//8*1.5s=12s 在12s后还没有生成海报就停止绘制if(this.count>8){wx.hideLoading();wx.showToast({title:'生成海报失败',icon:'none'})clearInterval(this.timeOut)this.count=0setTimeout(()=>{wx.navigateBack()},1500)}else{this.count++}}},

海报绘制成功后可以通过 @imgOK 回调获取海报路径

    onImgOk(e) {this.shareImg = e.mp.detail.path; // 生成的图片路径},

二、保存海报

   save() {wx.showLoading({title: "正在领取",mask: true});setTimeout(()=>{wx.hideLoading();if(this.shareImg){wx.saveImageToPhotosAlbum({filePath: this.shareImg,success: res => {wx.showModal({title: "保存成功",content: "海报已经成功保存到你的相册了",success: res => {wx.navigateBack()console.log(res)},error: err => {wx.navigateBack()console.log(err)}});},fail: err => {console.log(err)}});}             },500)},

这样海报就生成成功，生成后的效果如下图

最后贴出本页面完整代码

<template><div class="container"><div class="painter-pic"><painterv-if="Object.keys(templateJson).length!=0" @imgOK="onImgOk":imgErr="onImgErr":palette="templateJson"/><div class="save-btn" @click="save()">保存图片</div></div></div>
</template><script>
export default {data() {return {item:'',timeOut:'',count:0,posterPhoto: "",qrcodePath: "",templateJson: {},shareImg: "",};},methods: {onImgErr(e){console.log(e)},onImgOk(e) {this.shareImg = e.mp.detail.path; // 生成的图片路径},getSharePic(){wx.showLoading({title: "正在生成海报",mask: true});//海报动态生成，需要判断图片是否下载到本地再进行渲染this.timeOut=setInterval(() => {this.createPoster()}, 1500);},createPoster() {this.templateJson= {};// 绘制样式，判断图片是否已经生成if(this.posterPhoto && this.qrcodePath){this.templateJson= {background: "#ffffff",width: "548rpx",height: "883rpx",views: [{type: "image",url: this.posterPhoto,css: {top: "0rpx",left: "0rpx",width: "548rpx",height: "883rpx"}},{type: "image",url: this.qrcodePath,css: {top: "740rpx",right: "25rpx",width: "120rpx",height: "120rpx"}}]};//将加载框和定时器关掉wx.hideLoading();clearInterval(this.timeOut)}else{//8*1.5s=12s 在12s后还没有生成海报就返回原页面if(this.count>8){wx.hideLoading();wx.showToast({title:'生成海报失败',icon:'none'})clearInterval(this.timeOut)this.count=0setTimeout(()=>{wx.navigateBack()},1500)}else{this.count++}}},save() {wx.showLoading({title: "正在领取",mask: true});setTimeout(()=>{wx.hideLoading();if(this.shareImg){wx.saveImageToPhotosAlbum({filePath: this.shareImg,success: res => {wx.showModal({title: "保存成功",content: "海报已经成功保存到你的相册了",success: res => {wx.navigateBack()console.log(res)},error: err => {wx.navigateBack()console.log(err)}});},fail: err => {console.log(err)}});}             },500)},},mounted() {},onLoad: function(options) {let data=JSON.parse(decodeURIComponent((options.item)));var seft=this wx.downloadFile({url:data.posterSetupId.posterPhoto,success(res){seft.posterPhoto=res.tempFilePath}})wx.downloadFile({url:data.qrcodePath,success(res){seft.qrcodePath=res.tempFilePath}})this.getSharePic()},onReachBottom() {}
};
</script><style lang="less" scoped>
.container {width: 100%;box-sizing: border-box;font-size: 14px;.painter-pic {width: 100%;background: #f5f5f5;padding: 200rpx 100rpx 100rpx 100rpx;box-sizing: border-box;.save-btn {background: rgb(224, 46, 46);text-align: center;width: 100%;box-sizing: border-box;color: #ffffff;padding: 20rpx;border-radius: 10rpx;margin-top: 20rpx;font-size: 28rpx;}.close-btn {position: absolute;width: 54rpx;height: 54rpx;right: 50rpx;top: 240rpx;border-radius: 50%;border: 1px solid #fff;text-align: center;}}
}
</style>

mpvue利用painter生成海报相关推荐

uniapp开发微信小程序使用painter生成海报
最初绘制海报时是准备用canvas绘制,但是绘制遇到各种问题,且难度颇高,最后也没能绘制出来,也尝试过使用微信官方的 wxml-to-canvas,但需要传入wxml和样式,太为难我这个小小的后端开发 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
小程序使用Painter生成海报
文档 js源码 https://pan.baidu.com/s/10os-vr0mWsBwx08oXK2caQ 提取码: y1tw 我是直接下载github源码放到项目组件中 {"using ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
6个AI绘画网站，可生成海报
目录 1.Midjourney 2.Stable Diffusion Omline 3.Microsoft Designer 4.Craiyon 5.NightCafe S 6.Wombo 1.Mid ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
uni-app生成分享图片（使用 Painter 生成分享海报）
Painter 支持文本.图片.矩形.qrcode 类型的 view 绘制. 如何使用 1.引入代码.注意:存放目录 uni-app根据不同平台插件存放目录不同. git clone https: ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...

mpvue利用painter生成海报

前言

海报实现

一、首先引入painter

二、painter的使用

二、保存海报

mpvue利用painter生成海报相关推荐

最新文章

热门文章