@poster-render/taro-react v3.6.3

@poster-render/taro-react

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

安装

npm install @poster-render/taro-react

使用

import { FC, useRef } from "react";
import { pxTransform } from "@tarojs/taro";
import { PosterRender, PosterRenderRef } from "@poster-render/taro-react";

const Index: FC = () => {
  const posterRender = useRef<PosterRenderRef>(null);

  return (
    <PosterRender
      ref={posterRender}
      canvasId="taro-poster-render"
      renderType={"canvas"}
      canvasWidth={644}
      canvasHeight={1104}
      debug
      style={{
        width: pxTransform(644),
        height: pxTransform(1104),
      }}
      onRender={() => console.log("onRender")}
      onLongTap={() => posterRender.current?.savePosterToPhoto())}
      onRenderFail={(err) => console.error("onRenderFail", err?.message)}
      onSave={(url) => console.log("onSave", url)}
      onSaveFail={(err) => console.error("onSaveFail", err?.message)}
      list={[
        {
          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: "line",
          x: 50,
          y: 50,
          destX: 200,
          destY: 50,
          color: "#fff",
          lineWidth: 4,
        },
        {
          type: "text",
          x: 100,
          y: 180,
          width: 150,
          height: 30,
          text: "中二猪猪猪",
          color: "#fff",
          fontSize: 28,
          textAlign: "left",
          baseLine: "top",
          textDecoration: "line-through",
        },
      ]}
    />
  );
};

export default Index;

如果不喜欢我的封装可以使用@poster-render/taro - npm (npmjs.com)，以api的方式自己封装react组件或vue组件

props

基础props

renderType = "canvas"时

renderType = "image"时

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

image类型(PaintImage)

text类型(PaintText)

rect类型(PaintRect)

line类型(PaintLine)

实例方法

PosterRenderCore实例方法

参考@poster-render/taro - npm (npmjs.com)

注意

• 建议renderType传canvas，canvas2d支持同层渲染了（模拟器不一定支持），当要实现长按识别二维码场景场景时可以使用image方式，同时启用showMenuByLongpress

• renderType为image时会先展示canvas，图片生成后会盖在canvas上面，至于为啥这样做，ios下如果把canvas移出可视区域会导致图片模糊，暂时先这么处理吧，有好的方案可以给我提个issue

• 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

2.x升级到3.x

# 卸载2.x版本包
npm uninstall taro-poster-render
# 安装3.x版本包
npm install @poster-render/taro-react

有较大的break changes，但功能没怎么变，基本上就是修改了下api，字段名，对照新文档即可迁移