likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 48

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生成海报的图片类型stringpng/webp/jpegjpeg
scale图片质量系数,数值越高,越清晰,质量越大number--5

说明:

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

3.2 posterElements参数说明:

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

3.2.1 type = img:

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

3.3.2 type = font:

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

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

3.3.3 type = custom:

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

说明:

回调函数接收一个ctx参数(具体看示例)

4 绘制流程

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

5 后续迭代

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

6 结尾

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

转载自:https://juejin.cn/post/7122349510004572191
评论
请登录