@poster-render/taro v3.6.3

@poster-render/taro

通过配置的方式渲染海报，无需了解canvas语法。采用canvas2d api封装，支持同层渲染，支持微信/企微、支付宝、头条、h5

安装

npm install @poster-render/taro

使用

初始化

import { PosterRenderCore, PosterItemConfig } from '@poster-render/taro';

const poster = new PosterRenderCore({
  id: props.canvasId || "poster-render",
  width: props.canvasWidth,
  height: props.canvasHeight,
  destWidth: props.destWidth,
  destHeight: props.destHeight,
  quality: props.quality,
  fileType: props.fileType,
  dpr: props.dpr,
  debug: props.debug,
  onRender: props.onRender,
  onRenderFail: props.onRenderFail,
  onSave: props.onSave,
  onSaveFail: props.onSaveFail,
});

// 初始化
await poster.init();

提前加载图片，可以省略这一步

await poster.preloadImage(['https://img.1000.com/shumou/interaction/bg3.png']);

渲染图片

await poster.renderItem({
  	type: "image",
    x: 60,
    y: 380,
    width: 400,
    height: 300,
    backgroundColor: "red",
    mode: "cover",
    src: "https://img.1000.com/shumou/interaction/img2.png",
})

渲染矩形(radius设为宽高一半可以绘制圆)

poster.renderItem({
  	type: "rect",
    x: 294,
    y: 30,
    width: 96,
    height: 96,
    radius: 48,
    src: "https://img.1000.com/shumou/interaction/avatar.png",
})

渲染线

poster.renderItem({
  	type: "line",
    x: 50,
    y: 50,
    destX: 200,
    destY: 50,
    color: "#fff",
    lineWidth: 4,
})

渲染文字

// 绘制文字
poster.renderItem({
  	type: "text",
    x: 100,
    y: 180,
    width: 150,
    height: 30,
    text: "中二猪猪猪",
    color: "#fff",
    fontSize: 28,
  	lineNum:1,
    textAlign: "left",
    baseLine: "top",
    textDecoration: "line-through",
})

如果想要实现多段文字联动局中效果

// 用户昵称不定长
poster.renderItem({
  	type: "text",
    x: (textWidth, instance) =>
      (644 - textWidth - instance.measureText("的助力邀请").width) / 2,
    y: 180,
    width: (textWidth) => textWidth,
    height: 30,
    text: "中二猪猪猪",
    color: "#fff",
    fontSize: 28,
    textAlign: "left",
    baseLine: "top",
    textDecoration: "line-through",
})
// ”的助力邀请“长度固定
poster.renderItem({
  	type: "text",
    x: (textWidth, instance) =>
      (644 - textWidth - instance.measureText("中二猪猪猪").width) / 2 +
      instance.measureText("中二猪猪猪").width +
      10,
    y: 180,
    width: 200,
    height: 30,
    text: "的助力邀请",
    color: "#FEEE93",
    fontSize: 28,
    baseLine: "top",
    textDecoration: "underline",
})

渲染一组数据（不会清清除画布，需要手动操作）

await poster.render([
  {
    type: "rect",
    x: 0,
    y: 0,
    width: 644,
    height: 1104,
    radius: 0,
    backgroundColor: "black",
  },
  {
    type: "image",
    x: 0,
    y: 0,
    width: 644,
    height: 1104,
    mode: "cover",
    src: "https://img.1000.com/shumou/interaction/bg3.png",
    radius: 16,
  },
  {
    type: "image",
    x: 294,
    y: 30,
    width: 96,
    height: 96,
    radius: 48,
    src: "https://img.1000.com/shumou/interaction/avatar.png",
  },
  {
    type: "text",
    x: (textWidth, instance) =>
      (644 - textWidth - instance.measureText("的助力邀请").width) / 2,
    y: 180,
    width: (textWidth) => textWidth,
    height: 30,
    text: "中二猪猪猪",
    color: "#fff",
    fontSize: 28,
    textAlign: "left",
    baseLine: "top",
    textDecoration: "line-through",
  },
  {
    type: "text",
    x: (textWidth, instance) =>
      (644 - textWidth - instance.measureText("中二猪猪猪").width) / 2 +
      instance.measureText("中二猪猪猪").width +
      10,
    y: 180,
    width: 200,
    height: 30,
    text: "的助力邀请",
    color: "#FEEE93",
    fontSize: 28,
    baseLine: "top",
    textDecoration: "underline",
  },
  {
    type: "image",
    x: 70,
    y: 240,
    width: 508,
    height: 68,
    src: "https://img.1000.com/shumou/interaction/text.png",
  },
  {
    type: "rect",
    x: 22,
    y: 760,
    width: 600,
    height: 320,
    backgroundColor: "#fff",
    radius: 20,
    borderColor: "#000",
    borderWidth: 10,
  },
  {
    type: "rect",
    x: 100,
    y: 800,
    width: 100,
    height: 100,
    backgroundColor: "red",
    radius: 50,
    borderColor: "yellow",
    borderWidth: 10,
  },
  {
    type: "line",
    x: 50,
    y: 50,
    destX: 200,
    destY: 50,
    color: "#fff",
    lineWidth: 4,
  },
]);

Options

Methods

list支持四种原子类型：image、text、rect、line，复杂的效果可用通过相互组合实现，自由发挥吧（如果有无法实现的场景请一定要给我提个issue，我会尽快支持的）

image类型(PaintImage)

text类型(PaintText)

rect类型(PaintRect)

line类型(PaintLine)

注意

• canvas没有层级，后渲染的可能会盖住之前的内容，所以list要注意顺序，这里使用了for await...of特性实现“同步”渲染

• 小程序图片域名要提前配置到下载白名单

• 建议预加载图，否则图片会按顺序下载，增加渲染时长
• 受网路影响图片可能会下载失败，这里做了两次下载重试
• canvas宽高跟css宽高不是一个概念不要搞混了
• 微信小程序canvas2d 画布高度不能超过4096（其他小程序没测试），所以初始化时画布超过4096会抛错
• 默认渲染会开启高清模式，即画布会放大dpr倍，但是放大后画布尺寸可能会超限，所以，检测到画布高度超过4096后会取消高清模式，避免报错
• 部分安卓手机企微下会报“canvasToTempFilePath:fail:convert native buffer parameter fail. native buffer exceed size limit.”，查了下说是高清方案引起的，dpr超过3都会出现该问题，为了不报错，安卓手机企微下默认不启用高清模式，如果觉着海报不清楚，可以手动指定dpr
• 生成海报模糊？采用高清图、画布调大点、调高dpr（注意渲染速度，自己权衡吧）
• 支付宝小程序要启用基础库2.0
• 如果想要兼容其他小程序可以给我提个issue