Web-canvas-poster NPM

简介

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

npm install web-canvas-poster

yarn add web-canvas-poster

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

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

参数名	类型	释义	备注
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 格式，可以直接用于 img 标签

合成图的 canvas context

合成图的 canvas 对象

5 years ago

5 years ago

5 years ago