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("仅用于专家评审")
      },
  • 相关阅读:
    HTML th nowrap 属性
    C 语言实例 – 判断闰年
    Java MySQL 连接
    Linux shapecfg命令
    C 简介
    Java 之 HashSet 集合
    Java 之 Set 接口
    Java 之 LinkedList 集合
    Java 之 List 接口
    JavaScript 之 事件(详解)
  • 原文地址:https://www.cnblogs.com/niuniu0108/p/14335161.html
Copyright © 2011-2022 走看看