@pagoda-tools/watermark

安装

yarn add @pagoda-tools/watermark

基本用法

import { Watermark } from '@pagoda-tools/watermark';

const watermarker = new Watermark();

const watermarkRender = watermarker.render('.selector', '网页内容');

// 切换水印禁用状态
watermarkRender.toggleDisabled();
// 更新水印
watermarkRender.update();
// 销毁水印
watermarkRender.destroy();

移动端自适应

import { Watermark } from '@pagoda-tools/watermark';

const watermarker = new Watermark({
  // 设置 rootValue 可以开启水印大小自适应
  // 例如你正在以iPhone7作为参考来配置水印样式，则设置 rootValue 为 iPhone7 的屏幕宽度 375
  rootValue: 375,
});

默认配置

{
  "mode": "modal",
  "setPosition": true,
  "textStyle": {
    "left": 80,
    "top": 100,
    "rotate": -15,
    "fontSize": 14,
    "fontFamily": "\"PingFang SC\", \"helvetica neue\", \"hiragino sans gb\", \"arial\", \"microsoft yahei ui\", \"microsoft yahei\", \"simsun\", \"sans-serif\"",
    "alpha": 1,
    "color": "rgba(0, 0, 0, .08)",
    "lineHeight": 20,
    "align": "center",
    "baseLine": "middle"
  },
  "background": {
    "color": "transparent",
    "repeat": "repeat",
    "position": "left top",
    "attachment": "scroll",
    "origin": "padding-box"
  },
  "modal": {
    "position": "absolute",
    "top": 0,
    "right": "auto",
    "bottom": "auto",
    "left": 0,
    "zIndex": 999
  },
  "width": 200,
  "height": 160
}

API

class Watermark {
  constructor(options: WatermarkOptions): Watermark;

  render(
    selector: string | HTMLElement,
    content?: WatermarkOptions['content'],
  ): renderInstance | undefined;
}

export interface WatermarkOptions {
  mode?: 'background' | 'modal';
  textStyle?: {
    left?: number;
    top?: number;
    rotate?: number;
    fontSize?: number;
    fontFamily?: string;
    alpha?: CanvasCompositing['globalAlpha'];
    color?: CanvasFillStrokeStyles['fillStyle'];
    lineHeight?: number;
    align?: CanvasTextDrawingStyles['textAlign'];
    baseLine?: CanvasTextDrawingStyles['textBaseline'];
  };
  background?: {
    repeat?: Property.BackgroundRepeat;
    position?: Property.BackgroundPosition;
    origin?: Property.BackgroundOrigin;
    attachment?: Property.BackgroundAttachment;
    color?: Property.BackgroundColor;
  };
  modal?: {
    position?: Property.Position;
    top?: Property.Left;
    right?: Property.Right;
    bottom?: Property.Bottom;
    left?: Property.Left;
    width?: Property.Width;
    height?: Property.Height;
    zIndex?: Property.ZIndex;
  };
  rootValue?: number;
  setPosition?: boolean;
  width?: number;
  height?: number;
  drawText?: (ctx: CanvasRenderingContext2D) => void;
  content?: string | string[];
}

interface renderInstance {
  toggleDisabled(val?: boolean): void;
  update(): void;
  destroy(): void;
}