创建水印方法

最新推荐文章于 2025-04-27 22:34:27 发布

wait_yin

最新推荐文章于 2025-04-27 22:34:27 发布

阅读量145

点赞数

分类专栏：前端文章标签： javascript 开发语言前端

本文链接：https://blog.youkuaiyun.com/QB_yin/article/details/126157870

版权

前端专栏收录该内容

6 篇文章

订阅专栏

该代码段展示了一个JavaScript函数，用于在指定选择器选取的元素上添加自定义的水印。水印文本可以是用户信息组合，并且可以设置旋转角度、颜色等属性。该方法通过创建canvas元素，绘制水印文本并将其转换为背景图片，然后应用到页面元素上，实现了不显眼但始终存在的页面装饰效果。

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

function createWatemark({
  text = '水印',
  selectors = 'body',
  rotate = -14,
  color = 'rgba(144,147,153,0.1)'
} = {}) {
  const can = document.createElement('canvas');
  const body = document.body;
  const nodes = document.querySelectorAll(selectors);
  body.appendChild(can);
  can.width = text.length * 20;
  can.height = text.length * 20;
  can.style.display = 'none';
  const cans = can.getContext('2d');
  // 弧度偏转
  cans.rotate(rotate * Math.PI / 180);
  cans.font = '16px PingFang SC';
  cans.fontWeight = '400';
  cans.fontFamily = '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Roboto,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;'
  cans.fillStyle = color;
  cans.fillText(text, 0, can.height / 2);
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')' + ',url(' + can.toDataURL('image/png') + ')';
    nodes[i].style.backgroundPosition = '420px 420px,0px 0px'
  }
}

  createWatemark({
      // text: `${JSON.parse(sessionStorage.getItem('userInfo')).staffCode}${JSON.parse(sessionStorage.getItem('userInfo')).loginName}`,
      text: `${this.userInfo.CREATE_STAFF}${this.userInfo.CREATE_NAME}`,
      selectors: '#water-copy',
      color: 'rgba(144,147,153,0.1)'
    });