@qiuye-zhou/web-water-mark

快捷的给网站添加自定义水印

安装

npm install @qiuye-zhou/web-water-mark

使用yarn：

yarn add @qiuye-zhou/web-water-mark

使用 pnpm：

pnpm add @qiuye-zhou/web-water-mark

使用方法

基本用法

import Watermark from '@qiuye-zhou/web-water-mark';

const watermark = new Watermark({
    container: document.body,
    content: '水印内容',
    x: 100,
    y: 100,
    color: 'red',
    opacity: 0.5,
    zIndex: 1000,
    rotate: -30,
    fontSize: 20,
    width: 250,
    height: 150,
});
watermark.output();

参数说明

export interface config {
    container: HTMLElement, // 加水印的节点
    width?: number, // 单个水印的宽度
    height?: number, // 单个水印的高度
    fontSize?: number, // 字体大小
    font?: string, // 字体
    color?: string, // 字体颜色
    content: string, // 水印内容
    rotate?: number, // 旋转角度
    zIndex?: number, // 水印层次
    opacity?: number, // 水印透明度
    x?: number, // 水印位置
    y?: number, // 水印位置
    onWatermarkChanged?: Function // 水印修改回掉函数
}

在Vue中使用

<script setup lang="ts">
....
const elementRef = ref(null)
let watermark: Watermark | null = null
onMounted(() => {
  // 确保 elementRef.value 存在后再创建 Watermark 实例
  if (elementRef.value) {
    watermark = new Watermark({
      container: elementRef.value,
      content: `水印`,
      x: 100,
      y: 100,
      color: 'red',
      opacity: 0.3,
      zIndex: 1000,
      rotate: -30,
      fontSize: 20,
      width: 250,
      height: 150,
    })
    watermark.output()
  }
})

onUnmounted(() => {
  if (watermark) {
    watermark.destroy()
  }
})
</script>

<template>
    <div ref="elementRef">
    </div>
</template>

在React中使用

import React, { useEffect, useRef } from 'react';
import Watermark from '@qiuye-zhou/web-water-mark';

const MyComponent: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const watermarkRef = useRef<Watermark | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      watermarkRef.current = new Watermark({
        container: containerRef.current,
        content: '水印内容',
        x: 100,
        y: 100,
        color: 'red',
        opacity: 0.3,
        zIndex: 1000,
        rotate: -30,
        fontSize: 20,
        width: 250,
        height: 150,
      });
      watermarkRef.current.output();
    }

    return () => {
      if (watermarkRef.current) {
        watermarkRef.current.destroy();
      }
    };
  }, []);

  return <div ref={containerRef}>内容区域</div>;
};

export default MyComponent;

API

Watermark类

构造函数

new Watermark(config: config)

方法

• output(): 显示水印
• destroy(): 销毁水印

开发

安装依赖

npm install

构建

npm run build

发布到npm

npm run publish:npm

许可证

MIT License