taro-weapp-poster

taro-weapp-poster 是一款 taro 小程序海报生成器，采用 taro 内置 createCanvasContext 方法进行 canvas 绘制生成，支持绘制文字/图片

git 地址

https://github.com/Clycheng/taro-weapp-poster

使用说明

• npm install taro-weapp-poster

• 样图

import React, { useEffect, useState } from "react";

import { Image } from "@tarojs/components";
import { previewImage } from "@tarojs/taro";

import PosterModal from "taro-weapp-poster";
import { shareBase } from "../../const/index";

const Index = (props) => {
  const [url, setUrl] = useState("");

  return (
    <>
      <Image
        onClick={() =>
          previewImage({
            current: url,
            urls: [url],
          })
        }
        style={{ width: "100vw" }}
        mode="widthFix"
        src={url}
      ></Image>
      <PosterModal
        onRender={(res) => {
          setUrl(res?.tempFilePath ?? "");
        }}
        width="320px"
        height="568px"
        list={[
          {
            type: "text",
            text: "毛鼠",
            fontSize: "16",
            color: "#333",
            X: 90,
            Y: 45,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "15",
            color: "#333",
            X: 90,
            Y: 70,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "18",
            color: "#000000",
            X: 40,
            Y: 130,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "19",
            color: "#d63737",
            X: 40,
            Y: 170,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "19",
            color: "#6ce919",
            X: 40,
            Y: 200,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "18",
            color: "#000000",
            X: 40,
            Y: 130,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "19",
            color: "#d63737",
            X: 40,
            Y: 170,
          },
          {
            type: "text",
            text: "欢迎使用taro-weapp-poster",
            fontSize: "19",
            color: "#6ce919",
            X: 40,
            Y: 200,
          },

          {
            type: "shape",
            shapeType: 1, // 实心圆
            roundY: 100,
            roundX: 100,
            roundR: 100,

            color: "rgba(200,200,200,0.5)",
          },
          {
            type: "shape",
            shapeType: 0, // 矩形
            width: 280,
            height: 300,

            X: 20,
            Y: 100,
            color: "rgba(200,200,200,0.5)",
          },
          {
            type: "shape",
            shapeType: 2, // 圆角矩形
            width: 280,
            height: 300,
            roundR: 50,
            X: 0,
            Y: 200,
            color: "rgba(200,200,200,1)",
          },
          {
            type: "image",
            imgType: 1, // 图片类型，圆形1，矩形0
            urlType: 0, // 2:本地路径 或者网络路径:0 base64 1
            url:
              "https://www.npmjs.com/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci85NjgyOTMyZDAyMzFkZmRmOWNlNWE4YmRkMDczNmYxMz9zaXplPTEwMCZkZWZhdWx0PXJldHJvIn0.h3KyzPUeRTxRDRH_Hug7O3SUkfxPL5t_V9iUOqL0_c4",
            roundY: 50,
            roundX: 50,
            roundR: 25,
          },
          {
            type: "image",
            imgType: 0, // 图片类型，圆形1，矩形0
            urlType: 1, // 2:本地路径 或者网络路径:0 base64 1
            url: shareBase,
            width: 100,
            height: 100,
            X: 180,
            Y: 400,
          },
        ]}
      ></PosterModal>
    </>
  );
};
export default Index;

参数

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :--------: | :------: | :------: | :---------------------: | :-----------------------: | | width | 是 | string | 548px | 海报宽度 | | height | 是 | string | 750px | 海报高度 | | opacity | 否 | number | 1 | 海报透明度 | | background | 否 | string | white | 海报背景色 | | list | 否 | array | [] | 海报内容，详见 list | | onRender | 否 | function | (res)=>console.log(res) | 回调 res 返回海报本地路径 |

list

• 文字绘制

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :------: | :------: | :----: | :----: | :----------------------------: | | type | 否 | string | text | 元素类型 | | text | 否 | string | 文字 | 文字，type 为 text 时生效 | | color | 否 | string | 1 | 文字颜色，type 为 text 时生效 | | fontSize | 否 | number | 12 | 文字大小， type 为 text 时生效 | | X | 否 | array | [] | 坐标 X | | Y | 否 | array | [] | 坐标 Y |

• 图像绘制（矩形图像）

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :-----: | :------: | :----: | :----: | :-------------------------------------------: | | type | 否 | string | image | 元素类型 | | imgType | 否 | number | 0 | 图片类型：0-矩形 1-圆形 | | urlType | 否 | number | 0 | 图片路径类型：0-网络路径，1-base64 2-本地路径 | | url | 否 | string | | 图片路径 | | width | 否 | number | | 图像宽度 | | height | 否 | number | | 图像高度 | | X | 否 | number | | 坐标 X | | Y | 否 | number | | 坐标 Y |

• 图像绘制（圆形图像）

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :-----: | :------: | :----: | :----: | :-------------------------------------------: | | type | 否 | string | image | 元素类型 | | imgType | 否 | number | 1 | 图片类型：0-矩形 1-圆形 | | urlType | 否 | number | 0 | 图片路径类型：0-网络路径，1-base64 2-本地路径 | | url | 否 | string | | 图片路径 | | roundX | 否 | number | | 圆心 X 轴坐标 | | roundY | 否 | number | | 圆心 Y 轴左边 | | roundR | 否 | number | | 圆半径 |

• 矩形绘制（实心）

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :----: | :------: | :----: | :----: | :------: | | type | 否 | string | shape | 元素类型 | | shapeType | 否 | string | 0实心矩形｜1实心圆 | 元素类型 | | width | 否 | number | | 宽度 | | height | 否 | number | | 高度 | | color | 否 | string | | 矩形颜色 | | X | 否 | number | | X 轴坐标 | | Y | 否 | number | | Y 轴坐标 |

• 圆角矩形绘制（实心）

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :----: | :------: | :----: | :----: | :------: | | type | 否 | string | shape | 元素类型 | | shapeType | 否 | string | 0实心矩形/1实心圆 /2圆角矩形| 元素类型 | | width | 否 | number | | 宽度 | | height | 否 | number | | 高度 | | roundR | 否 | number | | 圆半径 | | color | 否 | string | | 矩形颜色 | | X | 否 | number | | X 轴坐标 | | Y | 否 | number | | Y 轴坐标 |

• 实心圆绘制

| 参数名 | 是否必传 | 类型 | 默认值 | 说明 | | :----: | :------: | :----: | :----: | :------: | | type | 否 | string | shape | 元素类型 | | shapeType | 否 | string | 0实心矩形/1实心圆 | 元素类型 | | roundY | 否 | number | | 圆心Y轴 | | roundX | 否 | number | | 圆心X轴 | | roundR | 否 | number | | 圆半径 | | color | 否 | string | | 颜色 |

版本说明

• 支持圆形图像绘制

• 支持 base64 图像地址

• 修改 urlType 参数 （old：1-本地路径，2-网络路径，3-base64（暂不支持））

• 支持矩形绘制

• 支持实心圆绘制（添加shapeType字段）

• 添加圆角矩形绘制

关于作者

(使用过程如有疑问或改善意见，由衷欢迎咨询)

微信: cxl1249587790 (备注来源)

email: [email protected]