推荐一款taro海报生成插件-taro-weapp-poster

    import React, { useEffect, useState } from "react";
    
    import { Image } from "@tarojs/components";
    
    import PosterModal from "../../components/Poster";
    import { shareBase } from "../../const/index";
    
    const Index = (props) => {
      const [url, setUrl] = useState("");
    
      return (
    <>
      <Image style={{ width: "100vw" }} mode="widthFix" src={url}></Image>
      <PosterModal
        onRender={(res) => setUrl(res?.tempFilePath ?? "")}
        width="320px"
        height="568px"
        list={[
          {
            type: "text",
            text: "这是文字",
            fontSize: "56px",
            color: "#333",
            X: 10,
            Y: 20,
          },
          {
            type: "image",
            imgType: 1, // 图片类型，圆形1，矩形0
            urlType: 1, // 2:本地路径 或者网络路径:0 base64 1
            url: shareBase,
            roundY: 100,
            roundX: 100,
            roundR: 50,
          },
          {
            type: "image",
            imgType: 0, // 图片类型，圆形1，矩形0
            urlType: 0, // 1:本地路径 或者网络路径:2
            url:
              "https://img.kaikeba.com/a/11344130301202fadm.png?imageView2/0/interlace/1/q/80|imageslim",
            width: 50,
            height: 50,
            X: 200,
            Y: 200,
          },
        ]}
      ></PosterModal>
    </>
      );
    };
    export default Index;
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-14/ciIvGtQRF25Ekfpz3hderaWlPs6Y.png)