创建水印方法

最新推荐文章于 2024-05-15 20:43:52 发布

wait_yin

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量79

点赞数

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

本文链接：https://blog.csdn.net/QB_yin/article/details/126157870

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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)'
    });