水印处理

shuishen

2023-12-19 160272de5778bddbd8386f647258c95ecf9e02a5

 src/warterMarkVUE.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-18 11:02:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-18 17:55:12
 * @LastEditTime: 2023-12-19 11:37:53
 * @FilePath: \jczz_web\src\warterMarkVUE.js
 * @Description:
 *
@@ -10,10 +10,16 @@
 */
/*水印配置*/
//声明
let id = "1.23452384164.123412415";
let watermark = {};
let time,
  textStr = "";

function handleResize() {
  setWatermark(textStr);
}
//水印配置
let setWatermark = (str) => {
  let id = "1.23452384164.123412415";
  // 移除水印 判断
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
@@ -22,18 +28,18 @@
  //创建画布
  let createCanvas = document.createElement("canvas");
  // 设置canvas画布大小
  createCanvas.width = 320; //宽度
  createCanvas.height = 200; //高度
  createCanvas.width = 340; //宽度
  createCanvas.height = 160; //高度

  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext("2d");
  /*水印样式调整配置*/
  Context2D.rotate((-20 * Math.PI) / 100); // 水印旋转角度
  Context2D.rotate((-10 * Math.PI) / 100); // 水印旋转角度
  Context2D.font = "16px Vedana"; //水印文字大小
  Context2D.fillStyle = "#fff"; //水印颜色 HEX格式,可使用red 或者rgb格式
  Context2D.fillStyle = "#999"; //水印颜色 HEX格式,可使用red 或者rgb格式
  Context2D.textAlign = "center"; //水印水平位置
  Context2D.textBaseline = "Middle"; //水印垂直位置
  Context2D.fillText(str, createCanvas.width / 3.2, createCanvas.height / 1);
  Context2D.fillText(str, createCanvas.width / 2.4, createCanvas.height / 1);

  //创建元素
  let createDiv = document.createElement("div");
@@ -50,24 +56,35 @@
  createDiv.style.background =
    "url(" +
    createCanvas.toDataURL("image/png") +
    ") left top repeat, rgba(0, 0, 0, 0.3)"; //水印显示(关键代码)
    ") left top repeat, rgba(0, 0, 0, 0.01)"; //水印显示(关键代码)
  document.body.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点
  return id;
};

// 此方法只允许调用一次
watermark.set = (str) => {
  textStr = str;
  let id = setWatermark(str);
  //设置间隔
  setInterval(() => {
  time = setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str);
    }
  }, 500);
  //改变大小时执行
  window.onresize = () => {
    setWatermark(str);
  };
  // 添加 resize 事件处理函数
  window.addEventListener("resize", handleResize);
};

watermark.remove = () => {
  var element = document.getElementById(id);
  // 删除元素
  if (element !== null) {
    clearInterval(time);

    window.removeEventListener("resize", handleResize);

    element.parentNode.removeChild(element);
  }
};

export default watermark;