介绍：

新一代海报生成组件：

• 生成速度快于html2canvas
• 生成图片质量高于html2canvas
• 代码结构更好,不需要html元素和css,性能更优
• 组件更小，只有4kb

引入

es6:

npm install create-poster --save
import createPoster from 'create-poster';

全局：

import "create-poster/esm.js";

用法：

const config ={ width: 300, height: 700, suffix: 'jpeg', scale: 5 }
const posterElements = [
    {
        type: 'img',
        src: 'https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/a95789e8626cd3d428ecb85c823d525c.png',
        x: 0,
        y: 0,
        width: 250,
        height: 450,
    },
    {
        type: 'custom',
        callback: draw
    },
    {
        type: 'img',
        src: 'https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ktb3nze709jx.jpeg?imageView2/2/w/640/h/480/q/100/format/webp',
        x: 10,
        y: 100,
        width: 230,
        height: 120
    },
    {
        type: 'font',
        x: 10,
        y: 20,
        value: '好好学习',
        size: 20
    }
]
createPoster(conifg, posterElements).then(res => {
    img.src = res;
})

config参数说明：

|参数|描述|类型|可选值|默认值| |:--|:--:|:--:|:--:|--:| |width|海报展示的宽度|number| --| 300| |height|海报展示的长度|number| --| 700| |suffix|生成海报的图片类型|string| png/webp/jpeg| jpeg| |scale|图片质量系数，数值越高，越清晰，质量越大|number| --| 5|

posterElements参数说明：

type = img;

|参数|描述|类型|可选值|默认值| |:--|:--:|:--:|:--:|--:| |type|元素类型|string| img/font/custom| --| |src|图片的地址|string| --| --| |width|图片的宽度|number| --| --| |height|图片的长度|number| --| --| |x|图片距离左的距离|number| --| --| |y|图片距离上的距离|number| --| --| |borderRadius|图片是否裁剪圆角|boolean| false/true| false|

type = font

|参数|描述|类型|可选值|默认值| |:--|:--:|:--:|:--:|--:| |type|元素类型|string| img/font/custom| --| |value|文字内容|string| --| --| |size|文字大小|number| --| 10| |color|文字颜色|string| --| black| |family|文字的字体|string| --| "Arial,sans-serif"| |textBaseline|文字的对齐方式|string| top/hanging/middle/alphabetic/ideographic/ bottom| hanging| |maxWidth|一行最大的文本长度|number| --| 350| |lineHeight|文字的行高|number| --| 12|

type = custom

|参数|描述|类型|可选值|默认值| |:--|:--:|:--:|:--:|--:| |type|元素类型|string| img/font/custom| --| |callback|执行的绘制函数|fn| --| --|

版本 1.0.0

• 支持绘制文字，图片
• 支持图片圆角
• 支持文字单行最大长度，自动换行
• 支持用户自定义操作

修复问题

• 1.0.1:修复文字不传lineHeight不展示换行文字