海报方案

目前主要的方案有：

服务端生成
客户端生成
服务端 + 客户端

一、客户端生成方案对比

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"/>

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 为生成的图片路径
},
```

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>

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"/>
```

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 平台
接入成本	简单快速	简单快速	简单快速	简单快速	自定义开发
扩展性	差	良好	良好	良好	--
平台迁移	不支持	需开发	需开发	需开发	支持
开发周期	较短	较短	较短	较短	根据具体需求而定

未完待续......

uni-app 海报

uni-app 海报

海报方案

一、客户端生成方案对比

1.1 爸妈搜海报

使用方法

1.2 Painter

使用 Painter

1.3 wxa-plugin-canvas

使用方法

1.4 mp_canvas_drawer

使用方法

客户端方案总体对比