提供常用api，支持微信/企微、支付宝、h5

1.安装

npm install @poster-render/taro-react

2.使用

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: 204,
          y: 376,
          width: 90, // 根据屏幕尺寸适配二维码
          height: 90,
          backgroundColor: '#fff',
          radius: 4
        },
        {
          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;

3.字段类型

3.1 type

有四种类型image、text、rect、line，默认是image，

• type: 'rect'：指定该元素是一个矩形

• type: 'image'：指定该元素是一个图片类型

• type: 'text'：指定该元素是一个文本类型

• type: 'line'：指定该元素是用于定义海报中的线条元素。这种类型允许你在海报上绘制一条直线。

3.2 x, y

是对应在海报中的x横纵坐标位置

3.3 radius

radius为元素圆角半径，顺序：左上 -> 右上 -> 右下 -> 左下，如果要绘制圆形，宽高一致，radius设为宽高一半，注意这里所有元素都会默认有个2px的圆角

更多说明请参考官方文档

Taro 物料市场 | 让每一个轮子产生价值