使用canvas给页面添加文字水印

夏天咯

已于 2022-06-02 17:15:11 修改

阅读量669

点赞数 1

分类专栏：杂文章标签：前端 javascript html

于 2022-06-02 12:24:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37628661/article/details/125098116

版权

杂专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用Vue.js在网页上实现实时添加可旋转的透明水印，并通过canvas绘制技术，配合定时器和事件监听来确保水印跟随目标元素动态调整位置。适合前端开发者学习和在项目中应用.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

vue页面添加水印 - 简书

代码：根据我们的需求我做了一点修改

let watermark = {};

let setWatermark = (str, targetDom) => {
  let id = 'watermark';

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
  }

  let can = document.createElement("canvas");
  can.width = 200;
  can.height = 100;

  let cans = can.getContext("2d");
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = "15px Vedana";
  cans.fillStyle = "rgba(0, 0, 0, 0.30)";
  cans.textAlign = "left";
  cans.textBaseline = "Middle";
  cans.fillText(str, can.width / 20, can.height);

  let div = document.createElement("div");
  div.id = id;
  div.style.pointerEvents = "none";
  div.style.top = targetDom.offsetTop + "px";
  div.style.left = targetDom.offsetLeft + "px";
  div.style.position = "fixed";
  div.style.zIndex = "100000";
  div.style.width = targetDom.clientWidth + "px";
  div.style.height = targetDom.clientHeight + "px";
  div.style.background =
    "url(" + can.toDataURL("image/png") + ") left top repeat";
  document.body.appendChild(div);
  return id;
};

// 如果水印存在 展示水印 如果不存在 创建之后展示 
// targetDom 是水印要盖住的元素
watermark.set = (str, targetDom) => {
  if (document.getElementById('watermark')) {
    document.getElementById('watermark').style.display = 'block'
  } else {
    let id = setWatermark(str, targetDom);
    let timer = setInterval(() => {
      if (document.getElementById(id) === null) {
        id = setWatermark(str, targetDom);
      } else {
        clearInterval(timer)
      }
    }, 2000);
    window.onresize = () => {
      setWatermark(str, targetDom);
    };
  }
};
//页面切换时展示水印 因为项目组件是keep-alive的 所以在beforeRouteEnter的时候调这个
watermark.show = () => {
  if (document.getElementById('watermark')) {
    document.getElementById('watermark').style.display = 'block'
  }

}
//beforeRouteLeave切换其他页面时可能需要隐藏水印
watermark.hide = () => {
  document.getElementById('watermark').style.display = 'none'
}
export default watermark