@hzab/image-watermark

组件模板

• [email protected]

• 注意：首次克隆先执行 npm run prepare 命令

组件

示例

import { useRef, useState } from "react";

import ImageWatermark, { WatermarkConfig } from "@hzab/image-watermark";
import { img } from "./img";

import "./index.less";

const watermarkConfig: WatermarkConfig[] = [
  {
    type: "text",
    content: "text 示例",
    fontSize: 28,
    color: "rgba(0,0,0,0.2)",
    align: "left",
    baseline: "alphabetic",
    rotate: -20,
    position: { x: 100, y: "0%" },
    anchor: "center-left",
    repeat: false,
    gap: { x: 180, y: 150 },
  },
  {
    type: "shape",
    shape: "line",
    start: { x: -80, y: -80 },
    end: { x: 80, y: 80 },
    stroke: "rgba(255,0,0,0.15)",
    lineWidth: 2,
    lineDash: [6, 4],
    lineCap: "round",
    rotate: 0,
    position: { x: "0%", y: "0%" },
    anchor: "bottom-left",
    repeat: true,
    gap: { x: 160, y: 160 },
  },
  {
    type: "shape",
    shape: "rect",
    width: 120,
    height: 400,
    radius: 8,
    fill: "rgba(0,120,255,0.1)",
    stroke: "rgba(0,120,255,0.3)",
    lineWidth: 2,
    position: { x: "0%", y: "0%" },
    anchor: "top-right",
    selfAnchor: "top-right",
    repeat: false,
  },
  {
    type: "image",
    url: "https://picsum.photos/60/60", // 无跨域限制的测试图片
    width: 60,
    height: 60,
    opacity: 1,
    position: { x: "0%", y: "-50%" },
    anchor: "bottom-right",
    selfAnchor: "bottom-right",
    repeat: false,
  },
];

const Index = () => {
  const [originalImg, setOriginalImg] = (useState < string) | (null > img);
  const [watermarkedImg, setWatermarkedImg] = (useState < string) | (null > null);
  const [loading, setLoading] = useState(false);

  function onDrawStart(params) {
    setLoading(true);
  }
  function onDrawEnd(params) {
    const { resImg } = params || {};
    setWatermarkedImg(resImg);
    setLoading(false);
  }

  return (
    <div className="demo">
      <ImageWatermark
        originalImg={originalImg}
        watermarkConfig={watermarkConfig}
        onDrawStart={onDrawStart}
        onDrawEnd={onDrawEnd}
      />
    </div>
  );
};

export default Index;

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------------- | ------------------- | ---- | ------ | -------------------------------------------------------- | | className | string | 否 | - | canvas 类名 | | style | React.CSSProperties | 否 | - | canvas 样式 | | originalImg | string | 否 | - | 底图 | | watermarkConfig | WatermarkConfig[] | 否 | - | 水印配置 | | onDrawStart | Function | 否 | - | 绘制开始回调 ({ canvasRef, drawerUtil }) => void | | onDrawEnd | Function | 否 | - | 绘制结束回调 ({ canvasRef, resImg, drawerUtil }) => void |

WatermarkConfig 水印配置

基础水印配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | -------------------------------------------------- | ---- | ------ | -------------------------------------------------------------- | | type | "text" | "image" | "shape" | 否 | - | 绘制图片类型 | | opacity | number | 否 | - | 透明度（0-1，默认 1） | | rotate | number | 否 | - | 旋转角度（度，默认 0） | | position | { x: number; y: number} | { x: string; y: string} | 否 | - | 基准位置；PX 数值或百分比字符串；默认 { x: '50%', y: '50%' }） | | anchor | Anchor | 否 | - | Canvas 基准点（默认 'top-left'） | | selfAnchor | Anchor | 否 | - | 自身基准点（默认 'top-left'） | | repeat | boolean | 否 | - | 是否重复铺满，默认 false | | gap | { x: number; y: number} | 否 | - | 重复间距，默认{x:100, y:100} | | scale | { x: number; y: number } | 否 | - | 缩放比例，默认{x:1, y:1} |

• Anchor: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";

文字水印配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---------- | -------------- | ---- | ------ | ------------------------------- | | content | string | 是 | - | 必选，水印文字内容 | | fontSize | number | 否 | - | 字体大小，默认 20px | | fontFamily | number | 否 | - | 字体族，默认'Arial' | | color | number | 否 | - | 文字颜色，默认'rgba(0,0,0,0.5)' | | align | CanvasAlign | 否 | - | 水平对齐，默认'center' | | baseline | CanvasBaseline | 否 | - | 垂直基线，默认'middle' | | stroke | number | 否 | - | 文字描边颜色，默认无 |

• CanvasAlign: "start" | "end" | "left" | "right" | "center";
• CanvasBaseline: "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";

图片水印配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------ | -------------------------------- | ---- | ------ | -------------------------- | | url | string | 是 | - | 水印图片地址 | | width | number | 是 | - | 绘制宽度 | | height | number | 是 | - | 绘制高度 | | sourceX | number | 否 | 0 | 图片裁剪起点 X，默认 0 | | sourceY | number | 否 | 0 | 图片裁剪起点 Y，默认 0 | | sourceWidth | number | 否 | - | 图片裁剪宽度，默认原图宽度 | | sourceHeight | number | 否 | - | 图片裁剪高度，默认原图高度 | | crossOrigin | "anonymous" | "use-credentials" | 否 | - | 跨域配置 |

图形水印配置

| 参数 | 类型 | 必填 | 默认值 | 说明 | | --------- | ------------------------ | ---- | ------ | ------------------------------ | | shape | ShapeType | 是 | - | 图形类型 | | width | number | 否 | - | 宽度（矩形/圆形/线条长度相关） | | height | number | 否 | - | 高度（矩形专用） | | radius | number | 否 | 0 | 圆角半径（矩形专用，默认 0） | | fill | string | 否 | - | 填充色（矩形/圆形专用） | | stroke | string | 否 | - | 描边色（所有图形通用） | | lineWidth | number | 否 | 1 | 线条宽度 | | lineCap | LineCap | 否 | - | 线帽样式（线条专用） | | lineJoin | LineJoin | 否 | - | 线条连接样式（线条专用） | | lineDash | number[] | 否 | - | 虚线样式，默认实线 | | start | { x: number; y: number } | 否 | - | 线条起点（线条专用） | | end | { x: number; y: number } | 否 | - | 线条终点（线条专用） |

• ShapeType: "rect" | "circle" | "line";
• LineCap: "butt" | "round" | "square";
• LineJoin: "round" | "bevel" | "miter";

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码

命令

• Mac 执行该命令，设置 pre-commit 为可执行文件

  • npm run mac-chmod
  • chmod +x .husky && chmod +x .husky/pre-commit

• 生成文档：npm run docs

• 本地运行：npm run dev

• 打包编译：npm run build

发布

• 命令：npm publish --access public
• 发布目录：
  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js