web-canvas-poster

简介

通过 canvas 组合文字，图片，并转换 canvas 到图片， 图片特性：支持圆角直角，并行下载，生成速度更快 文字特性：支持颜色字体大小等设置

demo

样例

安装

npm install web-canvas-poster

or

yarn add web-canvas-poster

用法

const options={}
const element={}
const elements=[]
new CanvasPoster(options).render(elements).then( (base64,ctx,canvas) => {} )

options

参数名	类型	释义	默认值
canvasW	int	画布宽度	无
canvasH	int	画布高度	无
scale	int	缩放系数	1

例如海报类，UI 一般按照 750/375 尺寸设计，canvasW 和 canvasH 可以直接填写标注的尺寸 有时候会遇到生成图片不清晰问题，这里可以试着加大 scale

element

参数名	类型	释义	备注
type	CanvasPoster.Image | CanvasPoster.Text	元素类型	无
x	int	x 坐标	无
y	int	y 坐标	无
height	int	高度	Image 仅有
width	int	宽度	Image 仅有
content	string|url	图片为 url，文字为文字 string	无
config	object	各自配置	无

type=CanvasPoster.Image

config={
    radius
}

type=CanvasPoster.Text

config={
    color,
    fontStyle,
    fontVariant,
    fontWeight,
    fontSize,
    fontFamily
}

base64

合成图的 base64 格式，可以直接用于 img 标签

ctx

合成图的 canvas context

canvas

合成图的 canvas 对象