zoukankan      html  css  js  c++  java
  • 记录一下Vue页面添加水印

    1、加水印方法(,新建文件 watermark.js,将文件放到assets文件夹下)

    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 = 150
      can.height = 120

      let cans = can.getContext('2d')
      cans.rotate(-20 * Math.PI / 180)
      cans.font = '15px Vedana'
      cans.fillStyle = 'rgba(0, 0, 0, 0.50)'
      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 = '3px'
      div.style.left = '0px'
      div.style.position = 'fixed'
      div.style.zIndex = '100000'
      div.style.width = document.documentElement.clientWidth * 0.5 + '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

    2、引用水印方法(在main.js中)

    import watermark from '@/assets/watermark.js'
    Vue.prototype.$watermark = watermark

    3、使用水印方法(需要加水印的页面使用)

     mounted: function () {
        this.$watermark.set("仅用于专家评审")
      },
  • 相关阅读:
    代码书写的细节
    php中的正则函数主要有三个-正则匹配,正则替换
    2个比较经典的PHP加密解密函数分享
    淘宝运营中的6大致命误区,你犯过么?
    30分钟教你写出10分的淘宝标题
    超全的web开发工具和资源
    转化率不好?告诉你转化飙秘诀
    帮你店铺日销千单的20个淘宝小技巧
    不刷单,中小卖家如何提升店铺流量?
    使用Flexible实现手淘H5页面的终端适配
  • 原文地址:https://www.cnblogs.com/niuniu0108/p/14335161.html
Copyright © 2011-2022 走看看