The tools to make watermark

Install

npm install xag-watermark -S

Use

  // t: 初始化明水印与透明暗水印

  import { handlesetWatermark, handleRemoveBaseWatermarkListener } from "xag-watermark";

  // d: 明水印
  handleSetBaseWatermark({
    type: 'normal',
    mWidth: 250,
    mHeight: 130,
    watermarkInfo: getUserWatermarkInfo(),
  });

  // d: 透明暗水印
  handleSetBaseWatermark({
    type: 'dark',
    textColor: "rgba(125,125,125, .098)",
    elTagId: "watermark",
    isBold: false,
    watermarkInfo: getUserWatermarkInfo(),
  });

  // d: 页面销毁时调用移除监听
  handleRemoveBaseWatermarkListener();
  

  // t: 为echart图嵌入加密水印

  import { handleCreateNormalDarkWatermarkCanvas } from "xag-watermark";

  // 普通加密水印，用于嵌入echart图背景
  let { res, canvas as watermarkCanvas} = handleCreateNormalDarkWatermarkCanvas({
    showWatermark: false, 
    watermarkInfo: vm.getUserWatermarkInfo()
  });

  // echarts-config
  backgroundColor: {
    type: 'pattern',
    image: watermarkCanvas,
    repeat: 'repeat'
  },

  // t: 解析工具的使用-可还原嵌入的暗水印
  
  // d: 设置水印解析模式,
  // d: opacity 透明水印解析，dark 加密暗水印解析
  handleSwitchModel('opacity', false);

  // d: 初始化水印解析
  initShowWatermark(true);
  
  // d: 自定义解析代码
  handleSetFilterCode("filter: brightness(1.5) saturate(90);");

  * t: 使用方法：
  * 1. 截图或复制图片到粘贴板中。
  * 2. 在页面中调用以上初始化的代码。
  * 3. 在已初始化本程序的网页中 粘贴图片。
  * 4. 程序将自动解析图片，并将图片插入到当前网页中展示

Config

@type  {string} 水印类型 明水印 normal 暗水印 dark
@watermarkInfo {string} 水印信息
@mWidth {number} 单个水印宽度
@mHeight {number} 单个水印高度
@textColor {string} 字体颜色
@elTagId {string} 元素的id值
@isBold {boolean} 字体粗细