特性

• 使用 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 处理。 |