vue 项目实现水印效果

水深无声 2022-12-24 10:49 278阅读 0赞

**目录**

（1）新建 waterMark.js文件

（2）页面使用

--------------------

### （1）新建引入 waterMark.js文件  ###

'use strict'
    
    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 = 200
      can.height = 120
    
      let cans = can.getContext('2d')
      cans.rotate(-15 * Math.PI / 180)
      cans.font = '14px Vedana'
      cans.fillStyle = '#d0d3d8' // 水印的颜色
      cans.textAlign = 'left'
      cans.textBaseline = 'Middle'
      cans.fillText(str, can.width / 3, can.height / 2)
    
      let div = document.createElement('div')
      div.id = id
      div.style.pointerEvents = 'none'
      div.style.top = '70px'
      div.style.left = '0px'
      div.style.position = 'fixed'
      div.style.zIndex = '100000'
      div.style.width = document.documentElement.clientWidth - 100 + 'px'
      div.style.height = document.documentElement.clientHeight - 100 + '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)
        }
      }, 500)
      window.onresize = () => {
        setWatermark(str)
      }
    }
    
    export default watermark;

### （2）页面使用 ###

import warterMark from "../../plugins/utils/waterMark";
    mounted() {
    
        warterMark.set("我是水印水印");
        
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关网站页面水印效果的实现（下）：页面水印防篡改

上一节（[网站页面水印效果的实现（上）：页面水印的添加][Link 1]）和大家介绍了页面水印如何生成以及如何使用，这一节来介绍如何防止水印被篡改，其实重点就是水印被删除。毕

旧城等待，/ 2024年03月04日 05:44/ 0 赞/ 116 阅读

相关 PHP实现水印和缩略图效果

准备工作：图片2张、字体文件至少1份文章目录 1.PHP图片添加文字水印 2.PHP图片添加图片水印 3.PHP缩略图 -------------

迷南。/ 2023年01月09日 03:44/ 0 赞/ 247 阅读

相关 vue 项目实现水印效果

目录（1）新建 waterMark.js文件（2）页面使用 -------------------- （1）新建引入 waterMark.js文件

水深无声/ 2022年12月24日 10:49/ 0 赞/ 279 阅读

相关 vue 项目中添加水印效果

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单，它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式，然后将转换后的

今天药忘吃喽~/ 2022年11月02日 11:47/ 0 赞/ 574 阅读

相关 vue项目水印添加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2022年09月03日 04:29/ 0 赞/ 294 阅读

相关 Java 图片添加水印效果

package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; impo

落日映苍穹つ/ 2022年04月25日 05:18/ 0 赞/ 421 阅读

相关 Vue项目在页面添加水印功能

Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {} let setWatermark =

迷南。/ 2022年03月15日 07:40/ 0 赞/ 469 阅读

相关 Vue项目实现vue element组件走马灯效果

我的qq 2038373094 效果如下（由于不支持动态图，我就截图了） ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

男娘i/ 2022年02月03日 15:51/ 0 赞/ 652 阅读

相关 html 水印效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水印</title>

分手后的思念是犯贱/ 2021年12月09日 00:05/ 0 赞/ 407 阅读

相关 vue中添加水印效果

效果图 ![在这里插入图片描述][25a7082682e13cd3488e61e03e4e56d7.png_pic_center] 创建warterMark.js文件

待我称王封你为后i/ 2021年09月09日 03:14/ 0 赞/ 608 阅读