[zhongjyuan]水印对象_watermark.set-优快云博客

本文链接：https://blog.youkuaiyun.com/zhongjyuan_jinyuan/article/details/132233889

水印管理功能

本文介绍了一个名为watermark的JavaScript对象，它提供了水印管理的功能。水印是一种在网页或文档上显示的透明文字或图像，用于标识所有者、保护版权或增加美观性。水印可以添加到网页的任何位置，也可以设置为全局背景。

用法示例

以下是如何使用watermark对象的示例：

设置水印：

watermark.set("My Watermark Text", "myElementId");

参数"My Watermark Text"是要显示的水印文本。

参数"myElementId"是DOM元素的唯一标识符，可以是任何HTML元素的ID。

显示水印：

watermark.show();

隐藏水印：

watermark.hide();

清除水印：

watermark.clear();

详细说明

设置水印

set(content, domId)

该方法用于设置水印并将其应用于指定的DOM元素。

参数content是水印的内容，可以是字符串或对象。
- 如果是字符串，将直接显示为水印文本。
- 如果是对象，将提取对象的值作为水印文本。
参数domId是要应用水印的DOM元素的唯一标识符。

显示水印

show()

该方法用于显示已设置的水印。

隐藏水印

hide()

该方法用于隐藏已设置的水印。

清除水印

clear()

该方法用于清除已设置的水印并停止自动刷新。

示例

以下是一些使用watermark对象的简单示例：

示例1 - 设置水印并显示

watermark.set("Confidential", "myElementId");
watermark.show();

这将在ID为"myElementId"的DOM元素上显示文本为"Confidential"的水印。

示例2 - 设置全局水印并隐藏

watermark.set("Draft");
watermark.hide();

这将在整个页面上显示文本为"Draft"的水印，并将其隐藏。

示例3 - 清除水印

watermark.clear();

这将清除先前设置的水印，并停止自动刷新。

总结

watermark对象提供了一种方便的方式来添加和管理水印。通过简单的方法调用，您可以轻松地设置、显示、隐藏和清除水印。使用水印可以帮助保护您的文档和网页，并为其增添独特的风格。

实际效果

代码片段

 /**
  * watermark 对象，提供水印管理功能
  * @author zhongjyuan
  * @email zhognjyuan@outlook.com
  * @website http://zhongjyuan.club
  */
 watermark: (function () {
  /**
   * 设置水印遮罩
   * @param {*} domId 唯一标识
   * @param {*} content 文本内容
   */
  function setWatermark(domId, content) {
   if (zhongjyuan.config.watermark.internalJump) return;

   // 删掉之前的水印
   if (document.getElementById(zhongjyuan.config.watermark.domId)) document.getElementById(zhongjyuan.config.watermark.domId).remove();
   if (document.body.classList.contains(zhongjyuan.config.watermark.domId)) {
    document.body.style.removeProperty("background");
    document.body.classList.remove(zhongjyuan.config.watermark.domId);
   }

   /**水印内容行 */
   const lines = [];
   if (zhongjyuan.helper.isString(content)) {
    lines.push(content);
   } else if (zhongjyuan.helper.isObject(content)) {
    zhongjyuan.helper.forEach(content, function (value, key) {
     lines.push(value);
    });
   }
   lines.push(new Date().format(zhongjyuan.config.watermark.dateFormat));

   // 创建一个画布
   const can = document.createElement("canvas");
   can.width = zhongjyuan.config.watermark.width;
   can.height = zhongjyuan.config.watermark.height;

   const cans = can.getContext("2d");
   // 旋转角度
   cans.rotate(zhongjyuan.config.watermark.angle);
   // 字体与大小
   cans.font = zhongjyuan.config.watermark.fontSize + " " + zhongjyuan.config.watermark.fontType;
   // 设置文本内容的当前对齐方式
   cans.textAlign = zhongjyuan.config.watermark.textAlign;
   // 设置填充绘画的颜色、渐变或者模式
   cans.fillStyle = zhongjyuan.config.watermark.fillStyle;
   // 设置在绘制文本时使用的当前文本基线
   cans.textBaseline = zhongjyuan.config.watermark.textBaseline;
   // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
   for (let i = 0; i < lines.length; i++) {
    cans.fillText(lines[i], can.width / 8, can.height / 2 + i * zhongjyuan.config.watermark.lineHeight);
   }

   zhongjyuan.config.watermark.background = can.toDataURL("image/png");
   if (document.getElementById(domId)) {
    const div = document.createElement("div");
    div.id = zhongjyuan.config.watermark.domId;
    div.style.cssText = zhongjyuan.config.watermark.div_style_cssText;
    div.style.background = "url(" + zhongjyuan.config.watermark.background + ") left top repeat";
    document.getElementById(domId).appendChild(div);
   } else {
    document.body.classList.add(zhongjyuan.config.watermark.domId);
    document.body.style.background = "url(" + zhongjyuan.config.watermark.background + ") left top repeat";
   }
  }

  return {
   /**显示 */
   show: function () {
    zhongjyuan.config.watermark.internalJump = false;
    if (document.getElementById(zhongjyuan.config.watermark.domId))
     document.getElementById(zhongjyuan.config.watermark.domId).style.display = "block";
    if (document.body.classList.contains(zhongjyuan.config.watermark.domId))
     document.body.style.background = "url(" + zhongjyuan.config.watermark.background + ") left top repeat";
   },

   /**隐藏 */
   hide: function () {
    zhongjyuan.config.watermark.internalJump = true;
    if (document.getElementById(zhongjyuan.config.watermark.domId))
     document.getElementById(zhongjyuan.config.watermark.domId).style.display = "none";
    if (document.body.classList.contains(zhongjyuan.config.watermark.domId)) document.body.style.removeProperty("background");
   },

   /**
    * 设置
    * @param {string|Object} content 水印内容
    * @param {string} domId DOM元素唯一标识
    * @returns
    */
   set: function (content = "zhongjyuan", domId) {
    // 如果存在水印，则移除后覆盖
    if (document.getElementById(zhongjyuan.config.watermark.domId) || document.body.classList.contains(zhongjyuan.config.watermark.domId))
     zhongjyuan.helper.watermark.clear();

    setWatermark(domId, content);

    // 每隔1分钟检查一次水印
    zhongjyuan.config.watermark.internal = setInterval(() => setWatermark(domId, content), zhongjyuan.config.watermark.internalTime);

    // 窗体大小变更监听
    window.onresize = () => setWatermark(domId, content);

    zhongjyuan.logger.trace(
     "[helper] watermark.set(${0}, ${1})",
     zhongjyuan.helper.isObject(content) ? JSON.stringify(content) : content,
     domId || "body"
    );
   },

   /**清空 */
   clear: function () {
    window.removeEventListener("resize", setWatermark);
    zhongjyuan.config.watermark.internal && clearInterval(zhongjyuan.config.watermark.internal);
    if (document.getElementById(zhongjyuan.config.watermark.domId)) document.getElementById(zhongjyuan.config.watermark.domId).remove();
    if (document.body.classList.contains(zhongjyuan.config.watermark.domId)) {
     document.body.style.removeProperty("background");
     document.body.classList.remove(zhongjyuan.config.watermark.domId);
    }
    zhongjyuan.logger.trace("[helper] watermark.clear()");
   },
  };
 })(),

本文由 mdnice 多平台发布