js水印

作者: Eden0204 | 来源:发表于2022-03-07 10:31 被阅读0次
// 水印
let watermark = {}

let setWatermark = str => {
  let id = '1.23452384164.123412415'

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

  let can = document.createElement('canvas')
  can.width = 180
  can.height = 180

  let cans = can.getContext('2d')
  cans.rotate((-30 * Math.PI) / 180)
  cans.font = '16px Vedana'
  cans.fillStyle = 'rgba(0, 0, 0, 0.08)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, 0, 100)

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

// 该方法只允许调用一次
watermark.set = str => {
  let id = setWatermark(str)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str)
    }
  }, 2000)
  window.onresize = () => {
    setWatermark(str)
  }
}
export default watermark

相关文章

  • Vue单页面实现水印功能

    在mian.js添加水印全局函数方法 //水印 Vue.prototype.$watermark =functi...

  • Vue之全局水印

    【需求】系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印) 1.创建水印Js文件 2.引入操...

  • js水印

  • 页面背景加水印

    前几天项目遇到一个问题,就是给网页加水印,上网找了一圈,有通过js加水印的,有通过canvas加水印的,但是都是给...

  • Wordpress好用免费插件

    Image Watermark 图片加水印插件 Simple Custom CSS and JS 用来定制css和...

  • JS实现水印效果

    实现代码如下 实现效果如下 欢迎打赏!感谢 本团队长期承接企业官网开发、电脑端和手机端的网页制作,团队有多年开发经...

  • js动态生成水印

    原理:通过动态生成canvas然后转为base64格式 代码Demo export const wat...

  • js实现水印效果

    首先预览一下成品效果 接下来 贴代码 直接cv大法即可使用 所加位置 (根据自己项目实际需求来) 完

  • 2020-07-22 web项目引入PDF.js并添加水印禁止下

    目录web项目引入PDF.js并添加水印禁止下载 下载并引入PDF.js实现预览动态预览PDF文件隐藏打开、下载、...

  • WaterMark.js给网页加水印

    两步给网页加水印 step1 step2 必须要在main.js中调用一次该方法,否则刷新之后就消失了。 刷新水印...

网友评论

      本文标题:js水印

      本文链接:https://www.haomeiwen.com/subject/lengrrtx.html