html页面添加水印，纯js设置

司徒小北

已于 2022-04-19 14:06:00 修改

阅读量2k

点赞数 2

分类专栏： Vue react TypeScript 文章标签： html javascript

于 2022-03-02 11:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_42333548/article/details/123225359

版权

Vue 同时被 3 个专栏收录

49 篇文章 1 订阅

订阅专栏

react

34 篇文章 2 订阅

订阅专栏

TypeScript

19 篇文章 0 订阅

订阅专栏

原理：根据页面大小，动态添加若干个div元素，将传递过来的文字写到div里，设置div旋转的角度、位置、宽度、高度、间距、字体、字体颜色等等

调用的逻辑：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	</head>
	<body>
		<div>
			<h6>测试添加水印页面</h6>
			<h5>测试添加水印页面</h5>
			<h4>测试添加水印页面</h4>
			<h3>测试添加水印页面</h3>
			<h2>测试添加水印页面</h2>
			<h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
      <h1>测试添加水印页面</h1>
		</div>
	</body>
	<script src="./watermark.js"></script>
	<script type="text/javascript">
    (function() {
      setDocumentWaterMark({ water_mark_txt: "test(123456)" });
      window.addEventListener("resize", function () {
        setDocumentWaterMark({ water_mark_txt: "test(123456)" });
      }, false);
    }());
	</script>
  <style>
    h1 {
      width: 100%;
      height: 300px;
    }
  </style>
</html>

实现逻辑：watermark.js

/**
 * document.body 添加全局水印
 * @param {*} settings 拓展参数
 */
function setDocumentWaterMark(settings) {
  var detaultConfig = {
    water_mark_txt: "",
    water_mark_x: 20, //水印起始位置x轴坐标
    water_mark_y: 50, //水印起始位置Y轴坐标
    water_mark_rows: 20, //水印行数
    water_mark_cols: 20, //水印列数
    water_mark_x_space: 140, //水印x轴间隔
    water_mark_y_space: 100, //水印y轴间隔
    water_mark_color: '#000', //水印字体颜色
    water_mark_alpha: 0.05, //水印透明度
    water_mark_fontsize: '14px', //水印字体大小
    water_mark_font: '微软雅黑', //水印字体
    water_mark_width: 200, //水印宽度
    water_mark_height: 160, //水印长度
    water_mark_angle: 20, //水印倾斜度数
  };
  if (arguments.length === 1 && typeof arguments[0] === "object") {
    var src = arguments[0] || {};
    for (key in src) {
      if (src[key] && detaultConfig[key] && src[key] === detaultConfig[key]) continue;
      else if (src[key]) detaultConfig[key] = src[key];
    }
  }
  var oTemp = document.createDocumentFragment();
  //获取页面最大宽度
  var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
  var cutWidth = page_width * 0.0150;
  var page_width = page_width - cutWidth;
  //获取页面最大高度
  var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
  page_height = Math.max(page_height, window.innerHeight - 30);
  if (detaultConfig.water_mark_cols == 0 || (parseInt(detaultConfig.water_mark_x + detaultConfig.water_mark_width * detaultConfig.water_mark_cols + detaultConfig.water_mark_x_space * (detaultConfig.water_mark_cols - 1)) > page_width)) {
    detaultConfig.water_mark_cols = parseInt((page_width - detaultConfig.water_mark_x + detaultConfig.water_mark_x_space) / (detaultConfig.water_mark_width + detaultConfig.water_mark_x_space));
    detaultConfig.water_mark_x_space = parseInt((page_width - detaultConfig.water_mark_x - detaultConfig.water_mark_width * detaultConfig.water_mark_cols) / (detaultConfig.water_mark_cols - 1));
  }
  if (detaultConfig.water_mark_rows == 0 || (parseInt(detaultConfig.water_mark_y + detaultConfig.water_mark_height * detaultConfig.water_mark_rows + detaultConfig.water_mark_y_space * (detaultConfig.water_mark_rows - 1)) > page_height)) {
    detaultConfig.water_mark_rows = parseInt((detaultConfig.water_mark_y_space + page_height - detaultConfig.water_mark_y) / (detaultConfig.water_mark_height + detaultConfig.water_mark_y_space));
    detaultConfig.water_mark_y_space = parseInt(((page_height - detaultConfig.water_mark_y) - detaultConfig.water_mark_height * detaultConfig.water_mark_rows) / (detaultConfig.water_mark_rows - 1));
  }
  var x;
  var y;
  for (var i = 0; i < detaultConfig.water_mark_rows; i++) {
    y = detaultConfig.water_mark_y + (detaultConfig.water_mark_y_space + detaultConfig.water_mark_height) * i;
    for (var j = 0; j < detaultConfig.water_mark_cols; j++) {
      x = detaultConfig.water_mark_x + (detaultConfig.water_mark_width + detaultConfig.water_mark_x_space) * j;
      var mask_div = document.createElement('div');
      mask_div.id = 'mask_div' + i + j;
      mask_div.className = 'mask_div';
      mask_div.appendChild(document.createTextNode(detaultConfig.water_mark_txt));
      //设置水印div倾斜显示
      mask_div.style.webkitTransform = "rotate(-" + detaultConfig.water_mark_angle + "deg)";
      mask_div.style.MozTransform = "rotate(-" + detaultConfig.water_mark_angle + "deg)";
      mask_div.style.msTransform = "rotate(-" + detaultConfig.water_mark_angle + "deg)";
      mask_div.style.OTransform = "rotate(-" + detaultConfig.water_mark_angle + "deg)";
      mask_div.style.transform = "rotate(-" + detaultConfig.water_mark_angle + "deg)";
      mask_div.style.visibility = "";
      mask_div.style.position = "fixed";
      mask_div.style.left = x + 'px';
      mask_div.style.top = y + 'px';
      mask_div.style.overflow = "hidden";
      mask_div.style.zIndex = "9999";
      //设置水印不遮挡页面的点击事件
      mask_div.style.pointerEvents = 'none';
      mask_div.style.opacity = detaultConfig.water_mark_alpha;
      mask_div.style.fontSize = detaultConfig.water_mark_fontsize;
      mask_div.style.fontFamily = detaultConfig.water_mark_font;
      mask_div.style.color = detaultConfig.water_mark_color;
      mask_div.style.textAlign = "center";
      mask_div.style.width = detaultConfig.water_mark_width + 'px';
      mask_div.style.height = detaultConfig.water_mark_height + 'px';
      mask_div.style.display = "block";
      oTemp.appendChild(mask_div);
    };
  };

  // 移除重绘、解决浏览器缩放问题
  var elem = document.getElementsByClassName("mask_div");
  let newElem = Array.prototype.slice.call(elem);
  for (var i = newElem.length - 1; i >= 0; i--) {
    document.body.removeChild(newElem[i]);
  }
  document.body.appendChild(oTemp);
}

调用的逻辑：

setDocumentWaterMark({ water_mark_txt: "test(123456)" });

window.addEventListener("resize", function () {
  setDocumentWaterMark({ water_mark_txt: "test(123456)" });
}, false);

交流

1、QQ群：可添加qq群共同进阶学习：进军全栈工程师疑难解群号: 856402057

2、公众号：公众号「进军全栈攻城狮」，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！通过公众号可加我vx拉群

司徒小北

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
html页面添加水印，纯js设置

原理：根据页面大小，动态添加若干个div元素，将传递过来的文字写到div里，设置div旋转的角度、位置、宽度、高度、间距、字体、字体颜色等等调用的逻辑：index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1
复制链接

扫一扫