在网页上添加水印 - react-watermark

一个React组件，可以在页面上添加图片或单线/多线文本水印。

如何使用它

1.安装并导入。

# NPM
$ npm i @uiw/watermark.js

import React from "react";
import Watermark from '@uiw/watermark.js';

2.在页面上添加一个单行文本水印。

const style = { /* CSS Styles */ };
const text = `Any Text Here`;
export default function App() {
  return (
    <Watermark
      content="ReactScript"
      style={{ background: '#fafafa' }}
    >
    <textarea style={style} spellCheck={false} defaultValue={text} />
    </Watermark>
  );
}

3.在页面上添加多行文本水印。

export default function App() {
  return (
    <Watermark
      content={['React', 'Script']}
      style={{ background: '#fafafa' }}
    >
    <textarea style={style} spellCheck={false} defaultValue={text} />
    </Watermark>
  );
}

4.在页面上添加一个图像水印。

export default function App() {
  return (
    <Watermark
      height={64}
      width={64}
      image="/path/to/watermark.svg"
    >
    <textarea style={style} spellCheck={false} defaultValue={text} />
    </Watermark>
  );
}

5.可用的组件道具。

export interface WatermarkOptions {
  /** watermark text content */
  content?: string | string[];
  /**
   * When the watermark is drawn, the rotation angle, in `°`. @default `-22`
   */
  rotate?: number;
  /**
   * High-definition print image source, for high-definition screen display,
   * it is recommended to use 2x or 3x image, and priority to use image rendering watermark.
   */
  image?: string;
  /** Horizontal spacing between watermarks. @default `212` */
  gapX?: number;
  /** vertical spacing between watermarks. @default `222` */
  gapY?: number;
  /** width of watermark. @default `120` */
  width?: number;
  /** height of watermark @default `64` */
  height?: number;
  /**
   * The vertical offset of the watermark drawn on the canvas.
   * Normally, the watermark is drawn in the middle position, ie `offsetTop = gapY / 2`
   */
  offsetLeft?: number;
  /**
   * The horizontal offset of the watermark drawn on the canvas, under normal circumstances,
   * the watermark is drawn in the middle position, ie `offsetTop = gapX / 2`
   */
  offsetTop?: number;
  /** text size @default `16` */
  fontSize?: number;
  /** text family @default `sans-serif` */
  fontFamily?: string;
  /** text weight @default `normal` */
  fontWeight?: 'normal' | 'light' | 'weight' | number;
  /** text color @default `rgba(0,0,0,.15)` */
  fontColor?: string;
  /** text style */
  fontStyle?: CanvasFillStrokeStyles['fillStyle'];
}

预览

The postAdd Watermark To Webpage - react-watermarkappeared first onReactScript.