小程序生成海报并下载

参考文章demo：https://developers.weixin.qq.com/s/J38pKsmK7Qw5
可视化编辑代码工具：https://lingxiaoyi.github.io/painter-custom-poster/

首先我们新增一个自定义组件，在该组件的json中引入painter

{"component": true,"usingComponents": {"painter": "/painter/painter"}
}

然后组件的WXML (代码片段在最后)

// 将该组件定位在屏幕之外，用户查看不到。
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />重点来了 JS (代码片段在最后)
Component({properties: {// 是否开始绘图isCanDraw: {type: Boolean,value: false,observer(newVal) {newVal && this.handleStartDrawImg()}},// 用户头像昵称信息userInfo: {type: Object,value: {avatarUrl: '',nickName: ''}}},data: {imgDraw: {}, // 绘制图片的大对象sharePath: '' // 生成的分享图},methods: {handleStartDrawImg() {wx.showLoading({title: '生成中'})this.setData({imgDraw: {width: '750rpx',height: '1334rpx',background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',views: [{type: 'image',url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',css: {top: '32rpx',left: '30rpx',right: '32rpx',width: '688rpx',height: '420rpx',borderRadius: '16rpx'},},{type: 'image',url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',css: {top: '404rpx',left: '328rpx',width: '96rpx',height: '96rpx',borderWidth: '6rpx',borderColor: '#FFF',borderRadius: '96rpx'}},{type: 'text',text: this.data.userInfo.nickName || '青团子',css: {top: '532rpx',fontSize: '28rpx',left: '375rpx',align: 'center',color: '#3c3c3c'}},{type: 'text',text: `邀请您参与助力活动`,css: {top: '576rpx',left: '375rpx',align: 'center',fontSize: '28rpx',color: '#3c3c3c'}},{type: 'text',text: `宇宙最萌蓝牙耳机测评员`,css: {top: '644rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: 'bold',fontSize: '44rpx',color: '#3c3c3c'}},{type: 'image',url: 'https://qiniu-image.qtshe.com/20190605index.jpg',css: {top: '834rpx',left: '470rpx',width: '200rpx',height: '200rpx'}}]}})},onImgErr(e) {wx.hideLoading()wx.showToast({title: '生成分享图失败，请刷新页面重试'})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData') },onImgOK(e) {wx.hideLoading()// 展示分享图wx.showShareImageMenu({path:  e.detail.path,fail: err => {console.log(err)}})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData') }}
})

那么我们该如何引用呢？
首先json里引用我们封装好的组件share-box

{"usingComponents": {"share-box": "/components/shareBox/index"}
}

以下示例为获取用户头像昵称后再生成图。

<button class="intro" bindtap="getUserInfo">点我生成分享图</button>
<share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}"  bind:initData="handleClose" />

调用的地方：

const app = getApp()Page({data: {isCanDraw: false},// 组件内部关掉或者绘制完成需重置状态handleClose() {this.setData({isCanDraw: !this.data.isCanDraw})},getUserInfo(e) {wx.getUserProfile({desc: "获取您的头像昵称信息",success: res => {const { userInfo = {} } = resthis.setData({userInfo,isCanDraw: true // 开始绘制海报图})},fail: err => {console.log(err)}})}
})

最后绘制分享图的自定义组件就完成啦~效果图如下：

tips：

文字居中实现可以看下代码片段文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号

代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5

小程序生成海报并下载相关推荐

小程序生成海报并下载到本地图库
需求小程序在海报页点需生成海报, 并下载图片到本机,同时, 下载的图片上有名片信息, 和一个小程序太阳码图片. 思想使用 canvas 来画出图片, 名片文本, 和小程序的太阳码操作在小程序 ...
微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
微信小程序生成海报下载到本地手机本地
里面有注释,这个就不详细说了,把对应的的图片路径换掉,就可以完成运行了 index.js 在这里有一个问题,所以在ctx.draw里面设置了一个定时器,因为官方文档说在ctx.draw回调中会绘制完成 ...
微信小程序生成海报失败问题解决方法
很多业务需求需要获取到微信头像,然后用头像和二维码及其他背景图一起生成海报,进行分享.在部分机型会出现生成失败问题.以下是本人排除后发现产生问题的原因和解决方法. 1.安卓机提示downloadFil ...
小程序生成海报，easy-canvas, painting参数使用demo
微信小程序不支持直接分享到朋友圈简直是一个大坑,最开始自己写了一个原始版本的canvas海报生成方式,结果发现生成的海报不是变形就是不适配所有屏幕,着实头疼了不少时间,前端实在太菜,偶然下载了一个电商 ...
微信小程序生成海报带二维码功能
wxml文件 <view><text class='shareText'>生成海报分享至</text><view class='imgBox'>< ...
小程序生成海报详解
效果图: <view class='poste_box' id='canvas-container' style='opacity:{{opacity}}'><canvas canv ...
微信小程序生成海报中二维码-----长按识别不了问题及处理方案
> 问题描述: 小程序某个页面中点击按钮,想要生成带有二维码的图片,后续保存本地.生成图片后转发微信中,后长按图片不会出现识别图中二维码的选项问题. 一年前写过一个分享页,当时大部分可以识别,只 ...

小程序生成海报并下载

小程序生成海报并下载相关推荐

最新文章

热门文章