海报方案
目前主要的方案有：
-
服务端生成
-
客户端生成
-
服务端 + 客户端
一、客户端生成方案对比
1.1 爸妈搜海报
功能特色
- 支持图片类型
- 支持文字类型
- 支持图片圆形裁剪
使用方法
-
1、 在微信小程序管理后台——设置——第三方服务，按 AppID（wxbf07f0f22c6c200d）搜索到该插件并申请授权。
-
2、在小程序项目中的 pages.json 文件中引入插件声明。
"plugins": { "poster": { "version": "1.0.0", "provider": "wxbf07f0f22c6c200d" } } -
3、在需要使用到该插件的小程序页面的配置文件中，做以下配置：
"usingComponents": { "poster": "plugin://poster/poster" } -
4、在相应的 vue 页面中添加以下语句即可完成插件的嵌入。
<poster :drawing="drawing" :savebtnText="savebtnText" canvas-style="canvas-style" savebtn-style="savebtn-style"/>
<details><summary>例子代码（点击展开）</summary>
drawing: [{
type: 'image',
url: 'https://i.loli.net/2018/10/30/5bd85117675b3.png',
left: 0,
top: 0,
width: 650,
height: 960
},
{
type: 'text',
content: '咖啡',
fontSize: 26,
color: 'white',
textAlign: 'left',
left: 170,
top: 50,
width: 650
}
]
</details>
1.2 Painter
功能特色
- borderWidth 和 borderColor 属性支持，可设置边框
- image 加入 mode 属性
- fontFamily 属性支持
- 支持渐变色
- 支持 box-shadow 和 text-shadow，统一使用 shadow 表示。
- text 加入 background 属性。
- 可获取 text 的宽度
- 支持元素的相对定位方法
- 可通过文本中的换行符进行主动换行
- 生成的图片支持分辨率调节
使用 Painter
-
1、 引入代码
Painter 的核心代码在另一个 repo 中。你可以通过 submodule 的方式进行库的引入。有关 submodule 的用法可自行 Google。
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git wxcomponents/painter -
2、 作为自定义组件引入，注意目录为第一步引入的代码所在目录
"usingComponents":{ "painter": "/wxcomponents/painter/painter" } -
3、 组件接收
palette字段作为画图数据的数据源, 图案数据以json形式存在，推荐使用“皮肤模板”的方法进行传递，示例代码如下：<painter :customStyle="customStyle" @imgOK="onImgOk" :palette="template" :dirty="true" />你可以通过设置 widthPixels 来强制指定生成的图片的像素宽度，否则，会根据你画布中设置的大小来动态调节，比如你用了 rpx，则在 iphone 6 上会生成 0.5 倍像素的图片。由于 canvas 绘制的图片像素直接由 Canvas 本身大小决定，此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。
<painter :customStyle="customStyle" @imgOK="onImgOk" :palette="template" :dirty="true" widthPixels="1000"/> -
4、 数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。
@imgOK="onImgOK" @imgErr="onImgErr" onImgOK(e) { // 其中 e.detail.path 为生成的图片路径 },
<details><summary>例子代码（点击展开）</summary>
template: {
width: '654rpx',
height: '600rpx',
background: '#eee',
views: [{
type: 'rect',
css: {
top: '40rpx',
left: '327rpx',
color: 'rgba(255, 0, 0, 0.5)',
width: '5rpx',
height: '500rpx'
}
},
{
type: 'image',
url: '/palette/avatar.jpg',
css: {
top: '40rpx',
left: '327rpx',
width: '100rpx',
height: '100rpx'
}
},
{
type: 'qrcode',
content: '/palette/avatar.jpg',
css: {
top: '180rpx',
left: '327rpx',
width: '120rpx',
height: '120rpx'
}
},
{
type: 'text',
text: "align: 'left' 或者不写",
css: {
top: '320rpx',
left: '327rpx',
fontSize: '30rpx'
}
}
]
}
</details>
1.3 wxa-plugin-canvas
功能特色
- borderWidth 和 borderColor 属性支持，可设置边框
- borderRadius 圆角支持
- 图片支持
- 文字支持
- 块状支持
- zindex 层级支持
- 下划线支持
- 生成的图片支持分辨率调节
使用方法
-
1、引入代码
直接通过 git 下载 wxa-plugin-canvas 源代码，并将miniprogram_dist目录拷贝到自己的项目组件目录中
-
2、作为自定义组件引入
"usingComponents": { "poster": "/wxcomponents/wxa-plugin-canvas/poster", } -
3、在相应的 vue 页面中添加以下语句即可完成插件的嵌入。
<poster id="poster" :config="posterConfig" @success="onPosterSuccess" @fail="onPosterFail"> <button>点击生成海报</button> </poster>
<details><summary>例子代码（点击展开）</summary>
posterConfig: {
width: 750,
height: 1334,
backgroundColor: '#fff',
debug: false,
pixelRatio: 1,
blocks: [{
width: 690,
height: 808,
x: 30,
y: 183,
borderWidth: 2,
borderColor: '#f0c2a0',
borderRadius: 20
},
{
width: 634,
height: 74,
x: 59,
y: 770,
backgroundColor: '#fff',
opacity: 0.5,
zIndex: 100
},
],
texts: [{
x: 30,
y: 113,
baseLine: 'top',
text: '发现一个好物，推荐给你呀',
fontSize: 38,
color: '#080808'
},
{
x: 59,
y: 895,
baseLine: 'middle',
text: [{
text: '2人拼',
fontSize: 28,
color: '#ec1731'
},
{
text: '¥99',
fontSize: 36,
color: '#ec1731',
marginLeft: 30
}
]
},
{
x: 522,
y: 895,
baseLine: 'middle',
text: '已拼2件',
fontSize: 28,
color: '#929292'
},
{
x: 59,
y: 945,
baseLine: 'middle',
text: [{
text: '商家发货&售后',
fontSize: 28,
color: '#929292'
},
{
text: '七天退货',
fontSize: 28,
color: '#929292',
marginLeft: 50
},
{
text: '运费险',
fontSize: 28,
color: '#929292',
marginLeft: 50
}
]
},
{
x: 360,
y: 1065,
baseLine: 'top',
text: '长按识别小程序码',
fontSize: 38,
color: '#080808'
},
{
x: 360,
y: 1123,
baseLine: 'top',
text: '超值好货一起拼',
fontSize: 28,
color: '#929292'
},
],
images: [{
width: 62,
height: 62,
x: 30,
y: 30,
borderRadius: 62,
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg'
},
{
width: 634,
height: 634,
x: 59,
y: 210,
url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/193256f45999757701f2.jpeg'
}
]
}
</details>
1.4 mp_canvas_drawer
功能特色
- 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）
- 绘制图片
- 绘制矩形
- 多图绘制
使用方法
-
1、引入代码
直接通过 git 下载 mp_canvas_drawer 源代码，并将 canvasdrawer 目录拷贝到自己的项目组件目录中
-
2、作为自定义组件引入
"usingComponents": { "poster": "/wxcomponents/canvasdrawer/canvasdrawer", } -
3、在相应的 vue 页面中添加以下语句即可完成插件的嵌入。
<canvasdrawer :painting="painting" @getImage="eventGetImage"/>
<details><summary>例子代码（点击展开）</summary>
painting: {
width: 375,
height: 555,
views: [{
type: 'image',
url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
top: 0,
left: 0,
width: 375,
height: 555
},
{
type: 'text',
content: '您的好友【kuckboy】',
fontSize: 16,
color: '#402D16',
textAlign: 'left',
top: 33,
left: 96,
bolder: true
},
{
type: 'text',
content: '发现一件好货，邀请你一起0元免费拿！',
fontSize: 15,
color: '#563D20',
textAlign: 'left',
top: 59.5,
left: 96
},
{
type: 'image',
url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
top: 136,
left: 42.5,
width: 290,
height: 186
},
{
type: 'text',
content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
fontSize: 16,
lineHeight: 21,
color: '#383549',
textAlign: 'left',
top: 336,
left: 44,
width: 287,
MaxLineNumber: 2,
breakWord: true,
bolder: true
},
{
type: 'text',
content: '￥0.00',
fontSize: 19,
color: '#E62004',
textAlign: 'left',
top: 387,
left: 44.5,
bolder: true
},
{
type: 'text',
content: '原价:￥138.00',
fontSize: 13,
color: '#7E7E8B',
textAlign: 'left',
top: 391,
left: 110,
textDecoration: 'line-through'
},
{
type: 'text',
content: '长按识别图中二维码帮我砍个价呗~',
fontSize: 14,
color: '#383549',
textAlign: 'left',
top: 460,
left: 165.5,
lineHeight: 20,
MaxLineNumber: 2,
breakWord: true,
width: 125
}
]
}
</details>
客户端方案总体对比
| 名称 | 爸妈搜海报 | Painter | wxa-plugin-canvas | mp_canvas_drawer | 内部开发 |
|---|---|---|---|---|---|
| 类型 | 第三方插件 | 自定义组件 | 自定义组件 | 自定义组件 | 自定义组件 |
| 平台差异说明 | 微信小程序 | 微信小程序 | 微信小程序 | 微信小程序 | uni-app 平台 |
| 接入成本 | 简单快速 | 简单快速 | 简单快速 | 简单快速 | 自定义开发 |
| 扩展性 | 差 | 良好 | 良好 | 良好 | -- |
| 平台迁移 | 不支持 | 需开发 | 需开发 | 需开发 | 支持 |
| 开发周期 | 较短 | 较短 | 较短 | 较短 | 根据具体需求而定 |
未完待续......
网友评论