使用 canvas 轻松绘制小程序海报

特性

• 使用 TypeScript 编写，提供完整的类型定义
• 使用 新版 canvas 2d 接口，性能更佳
• 支持 微信 / 支付宝小程序

安装

使用 pnpm 安装:

pnpm add @inottn/miniposter

使用 yarn 或 npm 安装:

# 使用 yarn
yarn add @inottn/miniposter

# 使用 npm
npm i @inottn/miniposter

快速上手

const miniposter = new MiniPoster(canvas, {
  width: 375,
  height: 600,
  pixelRatio: 2,
});

const renderConfig = {
  backgroundColor: '#fff',
  borderRadius: 8,
  overflow: 'hidden',
  children: [
    {
      type: 'image',
      top: 12,
      left: 12,
      width: 32,
      height: 32,
      src: 'xxxxx',
      borderRadius: 16,
      objectFit: 'cover',
    },
    {
      type: 'text',
      top: 18,
      left: 53,
      content: 'hello',
    },
  ],
}; // 渲染配置，参考下方文档

miniposter.render(renderConfig).then(() => {
  const exportConfig = { ... }; // 导出配置，参考下方文档

  miniposter.export(exportConfig).then(({ tempFilePath }) => {
    // tempFilePath 对应图片文件路径
  });
});

实例化 MiniPoster

使用 canvas 和 config 实例化一个 miniposter 对象

const miniposter = new MiniPoster(canvas, config);

canvas

画布实例

config

字段名	类型	默认值	说明
width	number	-	（必填）画布宽度
height	number	-	（必填）画布高度
pixelRatio	number	1	像素缩放比

miniposter.render(config)

config

字段名	类型	默认值	说明
backgroundColor	number	-	背景颜色
borderRadius	number	0	边框圆角
children	object[]	-	子元素

可绘制的元素类型如下：

type: container

const container = {
  type: 'container',
  // 其余属性，如下
};

字段名	类型	默认值	说明
left	number | () => number	-	（必填）相对父元素x轴的偏移
top	number | () => number	-	（必填）相对父元素y轴的偏移
width	number	-	（必填）容器宽度
height	number	-	（必填）容器高度
backgroundColor	string	-	背景颜色
borderRadius	number	0	边框圆角
overflow	'visible' | 'hidden'	'visible'	子元素溢出时的行为，可参考对应 CSS 属性
children	object[]	-	子元素

type: image

const image = {
  type: 'image',
  // 其余属性，如下
};

字段名	类型	默认值	说明
left	number | () => number	-	（必填）相对父元素x轴的偏移
top	number | () => number	-	（必填）相对父元素y轴的偏移
width	number	-	（必填）图像宽度
height	number	-	（必填）图像高度
backgroundColor	string	-	背景颜色
borderRadius	number	0	边框圆角
objectFit	'fill' | 'contain' | 'cover'	'fill'	图片的展示模式，可参考对应 CSS 属性

type: text

const text = {
  type: 'text',
  // 其余属性，如下
};

字段名	类型	默认值	说明
id	string	-	可以通过 getSize 方法获取对应的宽高信息
left	number | () => number	-	（必填）相对父元素x轴的偏移
top	number | () => number	-	（必填）相对父元素y轴的偏移
width	number	-	文本宽度
content	string	-	文本内容
color	string	-	字体颜色
fontSize	number	14	字体大小
fontWeight	string	'normal'	字体的粗细程度，一些字体只提供 normal 和 bold 两种值
fontFamily	string	'sans-serif'	字体名称
fontSrc	string	-	字体资源地址
lineClamp	number	-	文本最大行数，超过即显示省略号，需设置文本宽度
lineHeight	number	字体大小的 1.43 倍	文本行高
textAlign	'left' | 'center' | 'right'	'left'	文本的水平对齐方式，需设置文本宽度
textDecoration	'none' | 'line-through'	'none'	文本上的装饰性线条的外观，可参考对应 CSS 属性

miniposter.getSize(id)

获取指定元素的宽高信息

miniposter.export(config)

将当前画布指定区域导出为图片

字段名	类型	默认值	说明
x	number	0	指定的画布区域的左上角横坐标
y	number	0	指定的画布区域的左上角纵坐标
width	number	画布宽度	指定的画布区域的宽度
height	number	画布高度	指定的画布区域的高度
destWidth	number	画布宽度	输出的图片的宽度
destHeight	number	画布高度	输出的图片的高度
fileType	'png' | 'jpg'	'png'	目标文件的类型
quality	number	1	图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1 处理。