小程序生成海报插件painter（原生小程序版）

1.先去下载插件github 下载 https://github.com/Kujiale-Mobile/Painter 下载好了把painter整个文件放在components里面

index.json

{"usingComponents": {"painter":"/components/painter/painter"}
}

index.wxml

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<button bind:tap='createPoster'>生成海报</button>
<image class="poster" src="{{imgURL}}" mode="cover"></image>
<painter wx-if="{{showPainter}}"palette="{{template}}"bind:imgOK="onImgOK" />

index.js

let bg = "https://campaign.uglobal.com.cn/ikea/images/havemedal.jpg",avatarUrl;
Page({data: {template: {},imgURL:'',showPainter:false},async createPoster(){wx.showLoading({title: '正在为您生成海报',mask: true});bg = await this.getImageInfo(bg)avatarUrl = await this.getImageInfo(avatarUrl)//图片加载完成this.getPattle()},onImgOK(e) {wx.hideLoading();console.log("onImgOK")console.log(e.detail.path)this.setData({imgURL: e.detail.path})},getPattle(){let _this = this_this.setData({template: {width:"750rpx",height:"1624rpx",views:[{type: 'image',url: bg ,css: {top: '0rpx',left: '0px',width: '750rpx',height: '1624rpx'}},{type: 'image',url: avatarUrl,css: {top: '450rpx',left: '270rpx',width: '200rpx',height: '200rpx',borderRadius: '100rpx',borderWidth: "10rpx",borderColor: '#fed931'}}]},showPainter:true})},getUserInfo: function(e) {console.log(e)avatarUrl = e.detail.userInfo.avatarUrl},async getImageInfo(url){return new Promise((resolve, reject) => {wx.getImageInfo({src: url,success (res) {console.log(url + '======' + res.path)resolve(res.path)},fail (err) {console.log(err)wx.showToast({title:"网络异常",icon:"none"})reject(err)}})})}
})

注意：
1.网络图片真机显示空白请检查微信公众平台服务器域名里面的安全域名有没有添加
2.微信头像显示空白请添加 https://thirdwx.qlogo.cn; 添加域名后重新启动项目就可以成功显示了。
3.确保在图片加载完再生成海报（getImageInfo…）

小程序生成海报插件painter（原生小程序版）相关推荐

微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序生成直接跳转到小程序的太阳码，不限制个数还能携带参数
微信小程序生成太阳码.扫描以后直接跳转到指定的微信小程序界面.没有个数限制. 我们只能通过小程序的云函数来实现.首先新建一个云函数新建完云函数名字叫做createQR 在云函数的config.jso ...
uniapp微信小程序开发，生成海报插件painter的使用
1.引入painter插件下载地址:https://github.com/Kujiale-Mobile/Painter 代码下载后,将component中的painter文件夹放入项目wxcompo ...
微信小程序生成海报中二维码-----长按识别不了问题及处理方案
> 问题描述: 小程序某个页面中点击按钮,想要生成带有二维码的图片,后续保存本地.生成图片后转发微信中,后长按图片不会出现识别图中二维码的选项问题. 一年前写过一个分享页,当时大部分可以识别,只 ...
微信小程序生成海报失败问题解决方法
很多业务需求需要获取到微信头像,然后用头像和二维码及其他背景图一起生成海报,进行分享.在部分机型会出现生成失败问题.以下是本人排除后发现产生问题的原因和解决方法. 1.安卓机提示downloadFil ...
微信小程序生成海报无法保存到相册
公司小程序是用uniapp开发的,使用saveImageToPhotosAlbum()保存,在微信开发者工具中和真机调试都能正常运行,代码如下,在安卓真机上可以生成海报但是无法保存,苹果手机上直接无法 ...
小程序生成海报，easy-canvas, painting参数使用demo
微信小程序不支持直接分享到朋友圈简直是一个大坑,最开始自己写了一个原始版本的canvas海报生成方式,结果发现生成的海报不是变形就是不适配所有屏幕,着实头疼了不少时间,前端实在太菜,偶然下载了一个电商 ...
小程序生成分享海报php配置,小程序生成海报保存分享图片完全指南（包括：头像，文字）...
业务在小程序中生成海报(包括用户头像和自定义文字)并且保存到本地实现思路利用canvas画布,把用户头像和自定义文字定位好,用户点击按钮保存到本地注意事项难点小程序canvas不支持自定义宽 ...

小程序生成海报插件painter（原生小程序版）

小程序生成海报插件painter（原生小程序版）相关推荐

最新文章

热门文章