前端实现给页面中的某一部分生成水印

有时候我们的界面中数据展示的时候，会有一些敏感的重要的信息，为防止他人大量截图用作其他不正当用途，我们会需要在页面上生成水印，让他人即使截图，也是带有标识的。

那么前端应该怎么生成水印的呢？这里给大家提供一个方案，我这个是在vue项目中做的水印，好啦，话不多说  贴代码啦~

waterMark.js-----代码：

let watermark = {};

let setWatermark = canvasConfig => {

  let id = "canvas-water-mark-" + canvasConfig.markEleId;

  let watermarkEle = document.getElementById(canvasConfig.markEleId);

  if (document.getElementById(id) !== null) {

    watermarkEle.removeChild(document.getElementById(id));

  }

  // 生成canvas画布

  let canvasEle = document.createElement("canvas");

  // 水印宽高

  canvasEle.width = 270;

  canvasEle.height = 100;

let context = canvasEle.getContext("2d");

  context.rotate((-15 * Math.PI) / 180);

  context.font = "14px PingFangSC-Heavy,PingFang SC"; //水印字体、字号

  context.fillStyle = "rgba(0, 0, 0, 0.05)";

  context.textAlign = "left";

  context.textBaseline = "Middle";

  context.fillText(canvasConfig.text, 1, canvasEle.height);

  // 生成一个元素并将canvas设为其背景图片

  let bgElement = document.createElement("div");

  bgElement.id = id;

  bgElement.style.pointerEvents = "none";

  bgElement.style.top = canvasConfig.top + "px";

  bgElement.style.left = "0px";

  bgElement.style.position = "absolute";

  bgElement.style.zIndex = "100000";

  bgElement.style.width = "100%";

  bgElement.style.height = `calc(100% - ${bgElement.style.top})`;

  bgElement.style.background =

    "url(" + canvasEle.toDataURL("image/png") + ") left top repeat";

  watermarkEle.appendChild(bgElement);

  return id;

};

 

/**

 * @param {Object} canvasConfig 要加上水印的element 配置

 */

watermark.set = canvasConfig => {

  let id = setWatermark(canvasConfig);

  if (document.getElementById(id) === null) {

    id = setWatermark(canvasConfig);

  }

  // window.onresize = () => {

  //   setWatermark(canvasConfig);

  // };

};

watermark.formatDate = date => {

  if (typeof date == "object") {

    var y = date.getFullYear();

    var m = date.getMonth() + 1;

    m = m < 10 ? "0" + m : m;

    var d = date.getDate();

    d = d < 10 ? "0" + d : d;

    return "" + y + m + d;

  } else {

    return date;

  }

};

export default watermark;

使用-----：

1.引入waterMark.js文件   

import watermark from '@/utils/waterMark'

2.调用waterMark.js中的生成水印的方法

watermark.set(canvasConfig);

噔噔~水印生成了