Skip to content

Latest commit

 

History

History
194 lines (154 loc) · 8.29 KB

README.md

File metadata and controls

194 lines (154 loc) · 8.29 KB
Raw

logo

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