HTML 添加文本水印

css 复制代码

    body,
      html {
        margin: 0;
        height: 100vh;
        width: 100vw;
      }

javascript 复制代码

// 自定义文案
      const setting = {
        text: "水印文案", // 水印内容
        innerDate: true, // 在水印下方增加日期
        width: 110, // 水印宽度
      };
      
      // 自定义文字水印
      const watermark = (function () {
        return {
          build: function (arg) {
            // 获取页面宽度
            let maxWidth =
              Math.max(document.body.scrollWidth, window.screen.width) - 20;
            // 获取页面高度
            let maxHeight =
              Math.max(document.body.scrollHeight, document.body.clientHeight) +
              100;
            if (maxHeight === 0) {
              console.info("该页面无需水印");
              return;
            }
            const setting = {
              text: "水印 水印 水印", // 默认水印内容
              beginX: 50, // 默认起始x坐标
              endX: 0, // 默认结束x坐标
              beginY: 50, // 默认起始y坐标
              endY: 0, // 默认结束y坐标
              intervalX: 150, // 默认横向间隔宽度
              intervalY: 100, // 默认纵向间隔高度
              opacity: 0.3, // 字体透明度
              angle: 20, // 字体倾斜度
              fontsize: "15px", // 字体大小
              fontFamily: "微软雅黑", // 字体
              width: 100, // 水印（每个）宽度
              height: 80, // 水印（每个）高度
              innerDate: false, // 是否附带日期
            };
            // 默认变量与自定义变量结合
            if (arguments.length === 1 && typeof arguments[0] === "object") {
              const src = arguments[0] || {};
              for (const key in src) {
                if (!src.hasOwnProperty(key) || !src[key]) {
                  continue;
                }
                for (const def in setting) {
                  if (key === def) {
                    setting[def] = src[key];
                  }
                }
              }
            }
            // 计算列个数
            const cols = parseInt(
              (setting.intervalX + maxWidth - setting.beginX - setting.endX) /
                (setting.width + setting.intervalX) +
                ""
            );
            // 计算行个数
            const rows = parseInt(
              (setting.intervalY + maxHeight - setting.beginY - setting.endY) /
                (setting.height + setting.intervalY) +
                ""
            );
            // 水印内容附加日期
            if (setting.innerDate) {
              const date = new Date();
              setting.text = [
                setting.text,
                "<br>",
                date.getFullYear(),
                "年",
                date.getMonth() + 1,
                "月",
                date.getDate(),
                "日",
              ].join("");
            }
            const fragment = document.createDocumentFragment();
            let x, y;
            for (let i = 0; i < rows; i++) {
              y = setting.beginY + (setting.intervalY + setting.height) * i;
              for (let j = 0; j < cols; j++) {
                x = setting.beginX + (setting.width + setting.intervalX) * j;
                const element = document.createElement("div");
                element.id = "watermark" + i + j;
                // 设置倾斜角
                element.style.MozTransform =
                  "rotate(-" + setting.angle + "deg)";
                element.style.msTransform = "rotate(-" + setting.angle + "deg)";
                element.style.OTransform = "rotate(-" + setting.angle + "deg)";
                element.style.transform = "rotate(-" + setting.angle + "deg)";
                element.style.position = "absolute";
                element.style.left = x + "px";
                element.style.top = y + "px";
                element.style.overflow = "hidden";
                element.style.zIndex = "9999";
                element.style.pointerEvents = "none";
                element.style.opacity = setting.opacity;
                element.style.fontSize = setting.fontsize;
                element.style.fontFamily = setting.fontFamily;
                element.style.color = "#aaa";
                element.style.textAlign = "center";
                element.style.width = setting.width + "px";
                element.style.height = setting.height + "px";
                element.style.display = "block";
                element.innerHTML = setting.text;
                fragment.appendChild(element);
              }
            }
            document.body.appendChild(fragment);
          },
        };
      })();
      watermark.build(setting);

超链接：图片水印

HTML 添加 文本水印

HTML 添加文本水印