• vue项目中添加水印效果


    基于vue的架构中,在网页中添加水印效果,具体实现 代码如下:

    新建js文件:例如warterMark.js

     1 'use strict'
     2  
     3 let watermark = {}
     4  
     5 let setWatermark = (str) => {
     6   let id = '1.23452384164.123412415'
     7  
     8   if (document.getElementById(id) !== null) {
     9     document.body.removeChild(document.getElementById(id))
    10   }
    11  
    12   let can = document.createElement('canvas')
    13   can.width = 150
    14   can.height = 120
    15  
    16   let cans = can.getContext('2d')
    17   cans.rotate(-20 * Math.PI / 180)
    18   cans.font = '20px Vedana'
    19   cans.fillStyle = 'rgba(200, 200, 200, 0.20)'
    20   cans.textAlign = 'left'
    21   cans.textBaseline = 'Middle'
    22   cans.fillText(str, can.width / 3, can.height / 2)
    23  
    24   let div = document.createElement('div')
    25   div.id = id
    26   div.style.pointerEvents = 'none'
    27   div.style.top = '70px'
    28   div.style.left = '0px'
    29   div.style.position = 'fixed'
    30   div.style.zIndex = '100000'
    31   div.style.width = document.documentElement.clientWidth - 100 + 'px'
    32   div.style.height = document.documentElement.clientHeight - 100 + 'px'
    33   div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
    34   document.body.appendChild(div)
    35   return id
    36 }
    37  
    38 // 该方法只允许调用一次
    39 watermark.set = (str) => {
    40   let id = setWatermark(str)
    41   setInterval(() => {
    42     if (document.getElementById(id) === null) {
    43       id = setWatermark(str)
    44     }
    45   }, 500)
    46   window.onresize = () => {
    47     setWatermark(str)
    48   }
    49 }
    50  
    51 export default watermark

    使用方式:

    在App.vue文件中 引入该js文件:

    import warterMark from './warterMark'

    接下来再App.vue中的mounted方法中调用,代码如下所示:

    <script>
    import Watermark from '../static/js/watermark'
    export default {
      name: 'App',
      mounted: function () {
        Watermark.set('要添加的水印内容')
      }
    }
    </script>

    转至:https://blog.csdn.net/qq_32917123/article/details/87253716

  • 相关阅读:
    数据库分页
    oracle查询某一个字段的数量总和
    JSON.stringify()和JSON.parse()
    oracle查询以当前年份为准的近些年数据
    关于oracle中日期使用
    最简单的js确认框!
    oracle插入数据时解决和旧数据id的冲突
    CentOS查看内核版本,位数,版本号
    CentOS 使用命令设置代理
    CentOS 编译源码安装MySQL-5.6.16
  • 原文地址:https://www.cnblogs.com/lgjava/p/13294364.html
Copyright © 2020-2023  润新知