@inottn/miniposter v0.0.11

特性

• 使用 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

miniposter.render(config)

config

可绘制的元素类型如下：

type: container

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

type: image

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

type: text

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

miniposter.getSize(id)

获取指定元素的宽高信息

miniposter.export(config)

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