开源create-poster海报生成组件，客户用了都给我加鸡腿（图片又快又清晰，还能早点下班）

1.组件介绍

1.1最好用的海报生成组件：

• 生成速度快于html2canvas
• 生成图片质量高于html2canvas(实践后的结果)
• 代码结构更简洁,代码量更小,不需要html元素和css
• 组件更小，只有4kb,远小于html2canvas的200kb

小明用了createPoster写完海报功能后已经下班了，小王用html2canvas组件此时还在调css样式，望着几百行的html和css
陷入沉思。

组件和html2canvas对比以及实现原理具体可以看我下面的这篇文章，这篇文章主要将使用。

我是如何封装生成海报组件来取代html2canvas( objToPoster:新一代更快更清晰的海报组件)

1.2 版本1.0功能：

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

1.3 使用：

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

script标签引入：
src="dist/main.js"

1.4 github地址：github.com/6sy/crerate…

2.示例演示

2.1 下载

git clone https://github.com/6sy/creratePoster.git;
cd ./creratePoster

2.2 webpack启动（不推荐）：

npm i
npm run dev

2.3 手动引入(推荐，不需要下载webpack相关依赖)：

在src/index.html手动引入dist/main.js

2.4 用法：

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,
        maxWidth:20
    }
]
// 自定义绘制函数
function draw(ctx) {
    ctx.moveTo(10, 10);
    ctx.lineTo(500, 500)
    ctx.stroke();
}
createPoster(conifg, posterElements).then(res => {
    img.src = res;
})

3.1 config参数说明：

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

说明：

width和height可以理解为我们在设置自定义海报时的那个宽高，而suffix参数意思是衡量最终canvas元素大小的一个系数，suffix * width就是canvas实际的宽度。

3.2 posterElements参数说明：

我们把海报里面的元素规划分三大类：图片，文字，自定义。

3.2.1 type = img：

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

3.3.2 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	--	999
lineHeight	文字的行高	number	--	12

相关细节可以参考：developer.mozilla.org/zhCN/docs/W…

3.3.3 type = custom：

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

说明：

回调函数接收一个ctx参数（具体看示例）

4 绘制流程

我们知道js是单线程，一次只能做一件事，同理canvas绘制也是这样子的，那么我们绘制的顺序其实就是传入数组posterElements里索引的顺序，前面的会先绘制，后面的后绘制，所以后面绘制的内容会覆盖在前面绘制的内容上面。

5 后续迭代

• 支持文字背景色
• 支持自定义圆角
• 支持小程序（重点）

6 结尾

欢迎大家使用，遇到问题记得反馈哈，我24小时oncall。 另外大家有什么好的需求也可以告诉我，下个迭代版本冲冲冲。