vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue全局水印

Vue2实现全局水印效果的示例代码

作者:fruge

这篇文章主要为大家学习介绍了如何利用Vue2实现全局水印的效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以了解下

最近写项目遇到一个需求,全局显示水印,不管在哪个路由都要显示。

想要实现的效果:

新建shuiyin.js文件

// 定义水印函数
const addWatermark = ({
  container = document.body, // 水印添加到的容器,默认为 body
  width = "200px", // 水印 canvas 的宽度
  height = "100px", // 水印 canvas 的高度
  textAlign = "center", // 水印文字的对齐方式
  textBaseline = "middle", // 水印文字的基线
  font = "16px Microsoft Yahei", // 水印文字的字体
  fillStyle = "rgba(184, 184, 184, 0.6)", // 水印文字的填充样式
  content = "我是水印", // 水印文字的内容
  rotate = -30, // 水印文字的旋转角度
  zIndex = 10000, // 水印的 z-index 值
}) => {
  // 生成水印 canvas
  const canvas = document.createElement("canvas");
  canvas.setAttribute("width", width);
  canvas.setAttribute("height", height);
  const ctx = canvas.getContext("2d");
  ctx.textAlign = textAlign;
  ctx.textBaseline = textBaseline;
  ctx.font = font;
  ctx.fillStyle = fillStyle;
  ctx.rotate((Math.PI / 180) * rotate);
  ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 1);
  // 将 canvas 转换为 base64 URL
  const base64Url = canvas.toDataURL("image/png");
  console.log(base64Url);
  const __wm = document.querySelector(".__wm");
  const watermarkDiv = __wm || document.createElement("div");
  const styleStr = `
              position: fixed;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              width: 100%;
              height: 100%;
              z-index: ${zIndex};
              pointer-events: none;
              background: url('${base64Url}') left top repeat;
          `;
  watermarkDiv.setAttribute("style", styleStr);
  watermarkDiv.classList.add("__wm");
  // 则创建一个 div 并设置样式和类名
  if (!__wm) {
    container.style.position = "relative";
    container.insertBefore(watermarkDiv, container.firstChild);
  }
  // 监听容器变化,当容器发生变化时重新调用 addWatermark 函数
  const { MutationObserver } = window;
  if (MutationObserver) {
    let mo = new MutationObserver(function () {
      const __wm = document.querySelector(".__wm");
      // 只在__wm元素变动才重新调用__canvasWM
      if ((__wm && __wm.getAttribute("style") !== styleStr) || !__wm) {
        // 避免一直触发
        mo.disconnect();
        mo = new MutationObserver(() => {});
        addWatermark({
          container: document.getElementById("app"),
          width: "200px",
          height: "100px",
          textAlign: "center",
          textBaseline: "middle",
          font: "16px Microsoft Yahei",
          fillStyle: "rgba(184, 184, 184, 0.3 )",
          content,
          rotate: -30,
          zIndex: 10000,
        });
      }
    });
    mo.observe(container, {
      attributes: true,
      subtree: true,
      childList: true,
    });
  }
};
export default addWatermark;

main.js中全局注册

import addWatermark from "@/utils/shuiyin";
Vue.use(addWatermark);

到此这篇关于Vue2实现全局水印效果的示例代码的文章就介绍到这了,更多相关Vue全局水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文