开源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。 另外大家有什么好的需求也可以告诉我,下个迭代版本冲冲冲。
转载自:https://juejin.cn/post/7122349510004572191