微信小程序-绘制图片并分享下载（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"
        }
      },
    ],
  }
}

效果如下