Poster 分享海报 
概述
Poster 分享海报，传入JSON数据生成海报，支持绘制图片、文本、线条、块状矩形、二维码等。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
使用前请先阅读uni-app官方 canvas组件 (opens new window) 注意事项。
各端图片资源支持情况和官方一致（请确保平台支持），网络图片确保可以下载，小程序端还需要在小程序后台配置图片域名，Nvue端目前仅支持网络图片。
App-Nvue下使用
fui-poster-weex组件（不推荐使用，详见文档底部说明），该组件为nvue下专用组件，其他端使用fui-poster组件，两个组件用法一致，支持略有差别，具体请阅读文档。Nvue下Canvas是作为独立的模块，云端打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：
"app-plus" : {
/* 模块配置 */
"modules" : {
"Canvas" : "nvue canvas" //使用Canvas模块
}
}
1
2
3
4
5
6
2
3
4
5
6
- nvue 端使用请先阅读文档底部提示说明！
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
nvue下将 fui-poster 换成 fui-poster-weex 即可。注：Nvue端仅支持网络图片。
import fuiPoster from "@/components/firstui/fui-poster/fui-poster.vue"
export default {
components:{
fuiPoster
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序和文档API。
组件初始化
通过 width 属性设置画布宽度， height 属性设置画布高度，单位rpx。ready 事件为组件初始化完成时触发。
nvue下将 fui-poster 换成 fui-poster-weex 即可。注：Nvue端仅支持网络图片。
<fui-poster ref="generator" :width="560" :height="980" @ready="ready"></fui-poster>
1
//初始化完成后才可调用绘制方法
ready() {
this.isReady = true;
}
1
2
3
4
2
3
4
基本使用
通过点击 fui-button 组件触发 poster 方法生成海报。
nvue下将 fui-poster 换成 fui-poster-weex 即可。注：Nvue端仅支持网络图片。
<!--点击按钮生成海报-->
<fui-button type="gray" width="400rpx" height="84rpx" text="基本使用" bold @click="poster">
<!--海报组件-->
<fui-poster ref="generator" :width="560" :height="980" @ready="ready"></fui-poster>
1
2
3
4
2
3
4
//绘制海报JSON数据，所有涉及单位均为rpx
//注意：字节（头条）小程序颜色值不支持简写如：#333，必须写成：#333333
data() {
return {
isReady: false,
//基本使用案例数据
basicData: {
//绘制块状：正方形，长方形，圆形等
blocks: [{
//绘制海报背景
x: 0,
y: 0,
width: 560,
height: 980,
backgroundColor: '#ffffff'
}, {
//绘制带圆角方形
x: 20,
y: 20,
width: 100,
height: 100,
borderRadius: 20,
backgroundColor: '#465CFF',
zIndex: 2
}, {
//渐变背景
x: 140,
y: 20,
width: 100,
height: 200,
backgroundColor: '#FF2B2B',
gradientColor: '#6831FF',
zIndex: 2
}, {
//带边框
x: 260,
y: 20,
width: 100,
height: 100,
borderWidth: 1,
borderColor: '#465CFF',
zIndex: 2
}, {
//圆形
x: 380,
y: 20,
width: 100,
height: 100,
borderRadius: 100,
backgroundColor: '#465CFF',
zIndex: 2
}],
//绘制图片数据
imgs: [{
//图片资源类型在各平台支持情况与官方api一致，请先阅读官方api文档
imgResource: '/static/images/common/img_logo.png',
x: 20,
y: 260,
width: 100,
height: 100,
zIndex: 2
}, {
imgResource: '/static/images/common/img_logo.png',
x: 140,
y: 260,
width: 100,
height: 100,
borderRadius: 16,
zIndex: 2
}, {
imgResource: '/static/images/common/img_logo.png',
x: 260,
y: 260,
width: 100,
height: 100,
borderRadius: 100,
zIndex: 2
}],
//绘制文本数据
texts: [{
text: 'First UI',
x: 20,
y: 420,
fontSize: 32,
color: '#181818',
width: 520,
fontWeight: 'bold',
zIndex: 3
}, {
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
x: 20,
y: 460,
fontSize: 20,
color: '#181818',
width: 496,
zIndex: 3
}, {
text: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
x: 20,
y: 520,
fontSize: 20,
lineHeight: 32,
color: '#B2B2B2',
width: 496,
rows: 2,
zIndex: 3
}, {
text: '此段文字作废',
x: 20,
y: 620,
fontSize: 22,
color: '#B2B2B2',
width: 500,
lineThrough: true,
zIndex: 3
}, {
text: 'End!',
x: 20,
y: 916,
fontSize: 44,
color: '#465CFF',
width: 500,
fontWeight: 'bold',
zIndex: 6
}],
//绘制线条数据
lines: [{
x: 20,
y: 660,
endX: 220,
endY: 660,
color: '#181818',
width: 1,
zIndex:4
},{
x: 20,
y: 700,
endX: 240,
endY: 700,
color: '#09BE4F',
width: 4,
zIndex:4
},{
x: 20,
y: 740,
endX: 240,
endY: 780,
color: '#6831FF',
width: 4,
zIndex:4
},{
x: 20,
y: 780,
endX: 240,
endY: 740,
color: '#FFB703',
width: 4,
zIndex:5
},{
x: 20,
y: 820,
endX: 520,
endY: 820,
color: '#465CFF',
width: 4,
zIndex:5
}]
}
}
}
//组件初始化完成事件
ready() {
this.isReady = true;
},
//调用方法绘制海报
poster() {
if (this.isReady) {
uni.showLoading({
title: '正在生成...'
})
this.$refs.generator.generatePoster(this.basicData, (res) => {
console.log(res)
uni.previewImage({
urls: [res]
})
uni.hideLoading()
})
} else {
this.fui.toast('组件尚未初始化完成！')
}
}
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
# Slots
| 名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| width | Number, String | 画布宽度，单位rpx | 750 | - |
| height | Number, String | 画布高度，单位rpx | 1024 | - |
| pixelRatio | Number, String | 像素比率，缩放比 | 2 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @ready | 组件初始化完成时触发 | - |
# Methods
通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| generatePoster | 生成海报 | {Object} params 海报数据，具体格式与参数请详见下方说明 {Function} callback 回调函数，返回生成海报路径（H5端返回的为base64） |
| saveImage | 保存图片到相册 | {String} filePath 生成海报返回路径（H5端返回的为base64，仅可预览，自行长按保存） |
{Object} params 生成海报参数说明
let {texts = [], imgs = [], blocks = [], lines = [], qrcode = []} = params
params对象中有 texts（文本数据数组），imgs（图片数据数组），blocks（块状、矩形数据数组），lines（线条数据数组），qrcode（二维码数据数组）等属性，根据实际海报传入对应数据。
texts：Array<Object> 参数
| 属性名 | 类型 | 说明 |
|---|---|---|
| x | Number | 绘制文本的左上角x坐标位置，单位rpx |
| y | Number | 绘制文本的左上角y坐标位置，单位rpx |
| fontSize | Number | 绘制文本字体大小，单位rpx |
| color | String | 绘制文本字体颜色 |
| baseLine | String | 用于设置文字的水平对齐，可选值 'top'、'bottom'、'middle'、'normal'，可选 |
| textAlign | String | 用于设置文字的对齐，可选值 'left'、'center'、'right'，可选 |
| frontText | String | 当前绘制文本前面文本内容，用于计算文本长度，设置x值，可选 |
| frontSize | Number | 当前绘制文本前面文本内容字体大小，单位rpx，可选 |
| spacing | Number | 当前绘制文本与前面文本内容间距，单位rpx，可选 |
| text | String | 要绘制的文本 |
| opacity | Number | 设置全局画笔透明度，0~1之间，0 表示完全透明，1 表示完全不透明，可选 |
| lineThrough | Boolean | 是否需要中划线贯穿文本内容，可选 |
| width | Number | 需要绘制的最大宽度，单位rpx |
| rows | Number | 需要绘制的最多行数，超出隐藏，默认值为1，可选 |
| lineHeight | Number | 绘制文本行高，单位rpx，可选 |
| fontWeight | String | 设置文本的粗细，可选 |
| fontStyle | String | 设置字体的风格，可选 |
| fontFamily | String | 设置绘制的文本字体，可选 |
| zIndex | Number | 设置绘制内容的堆叠顺序，为了避免绘制内容被覆盖，需要指定绘制顺序，按从小到大的顺序绘制，可选 |
imgs：Array<Object> 参数
注：Nvue端仅支持网络图片，且保证图片可正常下载，请勿使用百度等第三方网络图片。
| 属性名 | 类型 | 说明 |
|---|---|---|
| imgResource | String | 所要绘制的图片资源，各平台支持情况与官方一致 |
| type | Number | 所绘制图片资源类型：1-无需处理（base64、当前项目中静态资源路径[nvue不支持]、网络路径等，需在平台支持下），2-网络图片，先下载再绘制 ，3-base64转本地图片（目前仅支持App，微信小程序，H5），可选 |
| x | Number | 图像的左上角在目标canvas上 X 轴的位置，单位rpx |
| y | Number | 图像的左上角在目标canvas上 Y 轴的位置，单位rpx |
| width | Number | 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放，单位rpx |
| height | Number | 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放，单位rpx |
| borderRadius | Number | 设置图片圆角值，单位rpx，可选 |
| borderWidth | Number | 设置图片边框宽度，单位rpx，可选 |
| borderColor | String | 设置图片边框颜色，可选 |
| zIndex | Number | 设置绘制内容的堆叠顺序，为了避免绘制内容被覆盖，需要指定绘制顺序，按从小到大的顺序绘制，可选 |
blocks：Array<Object> 参数
| 属性名 | 类型 | 说明 |
|---|---|---|
| width | Number | 矩形路径的宽度，单位rpx |
| height | Number | 矩形路径的高度，单位rpx |
| x | Number | 矩形路径左上角的x坐标，单位rpx |
| y | Number | 矩形路径左上角的y坐标，单位rpx |
| borderWidth | Number | 矩形边框宽度，单位rpx，可选 |
| borderColor | String | 矩形边框颜色，可选 |
| backgroundColor | String | 矩形背景色，可选 |
| gradientColor | String | 矩形渐变色，与背景色组合使用，可选 |
| gradientType | Number | 矩形渐变类型：1-从上到下渐变，2-从左到右渐变，可选 |
| borderRadius | Number | 矩形圆角值，单位rpx，可选 |
| opacity | Number | 设置全局画笔透明度，0~1之间，0 表示完全透明，1 表示完全不透明，可选 |
| shadow | Object | 矩形阴影： { offsetX:阴影相对于形状在水平方向的偏移, offsetY:阴影相对于形状在竖直方向的偏移, blur:阴影的模糊级别，数值越大越模糊 0~100, color:阴影的颜色 } nvue端不支持，可选 |
| zIndex | Number | 设置绘制内容的堆叠顺序，为了避免绘制内容被覆盖，需要指定绘制顺序，按从小到大的顺序绘制，可选 |
lines：Array<Object> 参数
| 属性名 | 类型 | 说明 |
|---|---|---|
| x | Number | 起始位置的x坐标，单位rpx |
| y | Number | 起始位置的y坐标，单位rpx |
| endX | Number | 结束位置的x坐标，单位rpx |
| endY | String | 结束位置的y坐标，单位rpx |
| color | String | 线条颜色 |
| width | Number | 线条宽度，单位rpx |
| zIndex | Number | 设置绘制内容的堆叠顺序，为了避免绘制内容被覆盖，需要指定绘制顺序，按从小到大的顺序绘制，可选 |
qrcode：Array<Object> 参数 V2.2.0+
| 属性名 | 类型 | 说明 |
|---|---|---|
| x | Number | 起始位置的x坐标，单位rpx |
| y | Number | 起始位置的y坐标，单位rpx |
| width | Number | 二维码宽度，单位rpx |
| height | Number | 二维码高度，单位rpx |
| value | String | 二维码内容 |
| foreground | String | 二维码前景色，默认值 #181818，可选 |
| background | String | 二维码背景色，默认值 #ffffff，可选 |
| zIndex | Number | 设置绘制内容的堆叠顺序，为了避免绘制内容被覆盖，需要指定绘制顺序，按从小到大的顺序绘制，可选 |
TIP
注：若 nvue android端报以下错误，暂时不用处理！
reportJSException >>>> exception function:gcanvas setBackGround for android view,
exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND:
TextureView doesn't support displaying a background drawable!
1
2
3
2
3
随着uni-app官方版本升级，目前针对 gcanvas 存在如下问题：
- 目前android端 gcanvas
toTempFilePathAPI 在部分机型可能出现不触发回调的问题，需等官方进行修复！ - 部分 android机 使用
gcanvas可能导致闪退 - 部分 android机 使用
gcanvas绘制中文可能不显示
综上问题，涉及绘制并生成图片等操作目前 android端 不建议使用 nvue 的 gcanvas，需等uni-app官方优化！建议在.vue下使用组件！
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。