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

1、引入painter插件

painter官网地址

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

官方插件下载地址

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

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

1.2.2 页面中引入并使用

.json

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  },
}
1
2
3
4
5

.wxml

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

.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
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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"
        }
      },
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

效果如下