微信小程序-绘制图片并分享下载（painter）-编程知识

微信小程序-绘制图片并分享下载（painter）

1、引入painter插件

painter官网地址

1.1 可通过官网的方法引入painter插件，

官方插件下载地址

1.2 可下载本文附带的插件包直接引入

1.2.1 复制下载下来的文件中的painter文件夹，将其放在components目录下

在这里插入图片描述

1.2.2 页面中引入并使用

.json

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

.wxml

  <painter palette="{{posterData}}" bind:imgOK="onImageOK" />

.js

const poster = require("./posterData")data:{posterImageUrl: "", //海报图片posterData: {},}onLoad(options) {this.setData({posterData: poster.getPosterData('这个是一个问题','这个是一个回答')})}//监听海报是否生成成功onImageOK(e) {wx.hideLoading();this.setData({posterImageUrl: e.detail.path})wx.showShareImageMenu({path: this.data.posterImageUrl})},

posterData.js

这个文件放在上面几个文件的同级目录下

//图片路径一定要是绝对路径或者网络路径，相对路径是无法显示的
export function getPosterData(question = '', answer = '') {return {width: '686rpx',height: '686rpx',background: "#FFFFFF",borderRadius: " 24rpx 24rpx 24rpx 24rpx",views: [{type: "text",text: "我与AI小硒的对话",css: {top: "32rpx",left: "32rpx",fontSize: "36rpx",color: "#000000",maxLines: 2,lineHeight: "52rpx",textAlign: "left",fontWeight: "bold"}},{type: 'image',url: "/agriculturalGrandModel/images/location.png",css: {top: '94rpx',left: '32rpx',width: '32rpx',height: '32rpx',},},{type: "text",text: "来源：富硒农业认知大模型",css: {top: "94rpx",left: "72rpx",fontSize: "24rpx",color: "rgba(0,0,0,0.9)",lineHeight: "40rpx",textAlign: "left",}},{type: 'image',url: '',css: {top: '32rpx',right: '32rpx',width: '100rpx',height: '100rpx',},},{type: 'rect',css: {top: '154rpx',right: '32rpx',width: '620rpx',height: '480rpx',color: "#F5F6F7",borderRadius: "10rpx 10rpx 10rpx 10rpx"},},{type: 'image',url: "/agriculturalGrandModel/images/user-icon.png",css: {top: '176rpx',right: '54rpx',width: '66rpx',height: '66rpx',borderRadius: "50%"},},{type: "text",text: question,css: {width: "435rpx",top: "192rpx",right: "154rpx",maxLines: 3,fontSize: "23rpx",color: "#fff",lineHeight: "36rpx",textAlign: "left",background: "linear-gradient( 273deg, #44BE35 0%, #6ECB63 100%)",boxShadow: "0rpx 2rpx 7rpx 0rpx rgba(0,0,0,0.05)",borderRadius: "20rpx 0rpx 20rpx 20rpx",padding: "20rpx"}},{type: 'image',url: "/agriculturalGrandModel/images/ai-icon.png",css: {top: "360rpx",left: '50rpx',width: '66rpx',height: '66rpx',borderRadius: "50%"},}, {type: "text",text: answer,css: {width: "435rpx",top: "360rpx",left: "150rpx",maxLines: 6,fontSize: "23rpx",color: "rgba(0, 0, 0, 0.90)",lineHeight: "36rpx",textAlign: "left",background: "#fff",boxShadow: "0rpx 2rpx 7rpx 0rpx rgba(0,0,0,0.05)",borderRadius: "0rpx 20rpx 20rpx 20rpx",padding: "20rpx"}},],}
}