页面水印 vue水印展示当前ip地址

水印主体

<template>
    <div class="watermark-box">
        <div :id="id">div>
    div>
template>

<script>
    export default {
        name: '',
        components: {},
        props: {},
        data() {
            return {
                id: Math.random().toString().slice(-6),
            }
        },
        mounted() {
            this.forWatermark();
        },
        methods: {
            async forWatermark(){
                this.$axios.get("watermark/queryWatermarkInfo")
                    .then(result => {
                        // 设置水印  参数:{需要设置水印的div,上面获取到的ip,水印基本设置(可以不传,使用默认设置)}
                        this.setWatermark(result.data.data);
                    })
            },
            setWatermark(data) {
                //内网用户名
                // var lastname = JSON.parse(sessionStorage.userInfo).currentLoginName;
                //外网用户名
                var lastname = window.$root.userInfo.username;
                const div = document.getElementById(this.id)
                const can = document.createElement('canvas')
                const width = div.parentNode.parentNode.offsetWidth
                const height = div.parentNode.parentNode.offsetHeight
                div.style.width = width + 'px'
                div.style.height = height + 'px'
                // 设置canvas画布大小
                can.width = width / 4
                can.height = height > 500 ? height / 4 : height

                const cans = can.getContext('2d')
                cans.rotate((-25 * Math.PI) / 180) // 水印旋转角度
                cans.font = '1.2rem Vedana'
                cans.fillStyle = '#e5dddd'
                cans.textAlign = 'center'
                cans.textBaseline = 'Middle'
                let index = 0
                cans.fillText(lastname, can.width / 3.4, can.height / 2.0 + index)
                cans.fillText(data.unicode, can.width / 3.4, can.height / 2.0 + index + 27)
                cans.fillText(data.ipAddress, can.width / 3.4, can.height / 2.0 + index + 54)
                cans.fillText(data.systemTime, can.width / 3.4, can.height / 2.0 + index + 81)
                cans.fillText(data.systemName, can.width / 3.4, can.height / 2.0 + index + 108)
                div.style.opacity = '0.5'
                div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
            },
        },
    }
script>

<style scoped lang="scss">
    .watermark-box {
        width: 100%;
        height: 100%;
        position: fixed;
        pointer-events: none;
        z-index: 999;
    }
style>

后端请求 控制层

package com.nusp.Controller.Watermark;

import com.nusp.Common.Result;
import com.nusp.Common.ResultCode;
import com.nusp.Service.Watermark.IWatermarkService;
import com.nusp.Utils.ResultFactory;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.Map;

/**
 * @Author: 
 * @Date: 2022/9/8 16:32
 * @Description: 水印控制层
 */
@RestController
@RequestMapping("/watermark")
@Slf4j
public class WatermarkController {

    @Autowired
    private IWatermarkService service;
    // 水印开关
    @Value("${watermark.switch}")
    private int watermark;

    @GetMapping({"/queryWatermarkInfo"})
    public Result queryWatermarkInfo(HttpServletRequest request) {
        if (0 == watermark)
            return ResultFactory.buildResult(ResultCode.CLOSED,"水印开关关闭",null);
        Map<String, Object> map = service.queryWatermarkInfo(request);
        return ResultFactory.bulidSuccessResult(map);
    }
}

水印实现类

package com.nusp.Service.Watermark.Impl;

import com.nusp.Service.Watermark.IWatermarkService;
import com.nusp.Utils.DateUtils;
import com.nusp.Utils.IpUtil;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

/**
 * @Author: 
 * @Date: 2022/9/8 16:35
 * @Description: 水印实现类
 */
@Service
@Slf4j
public class WatermarkServiceImpl implements IWatermarkService {

    @Override
    public Map<String, Object> queryWatermarkInfo(HttpServletRequest request) {
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("unicode", "0601");
        resultMap.put("ipAddress", convertIp(IpUtil.getIpAddress(request)));
        resultMap.put("systemTime", DateUtils.getNowTime());
        resultMap.put("systemName", "***********");
        return resultMap;
    }


    private String convertIp(String ipAddress) {
        StringBuilder sBuilder = new StringBuilder("");
        if (StringUtils.isNotBlank(ipAddress)) {
            String[] ipPartArray = ipAddress.split("\\.");
            for (int i = 1; i < ipPartArray.length; i++) {
                sBuilder.append(String.format("%03d", new Object[] { Integer.valueOf(Integer.parseInt(ipPartArray[i])) }));
            }
        }
        return sBuilder.toString();
    }
}

ipUntils

package com.nusp.Utils;

import javax.servlet.http.HttpServletRequest;

/**
 * @Author: 
 * @Date: 2022/9/8 16:55
 * @Description: 获取客户端IP地址
 */
public class IpUtil {
    public static String getIpAddress(HttpServletRequest request) {
        String ip = request.getHeader("x-forwarded-for");
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
            ip = request.getHeader("Proxy-Client-IP");
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
            ip = request.getHeader("WL-Proxy-Client-IP");
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
            ip = request.getRemoteAddr();
        if (ip.contains(","))
            return ip.split(",")[0];
        return ip;
    }
}

前端 main.js 引入

import Watermark from './page/Watermark/Watermark.vue'
Vue.component('Watermark', Watermark)

app.vue调用

<template>
  <div id="app">
    <Watermark>Watermark>
      <router-view v-if="RouterState" />
  div>
template>
<script>
export default {
  name: "App",
  components: {},
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      RouterState: true,
      timer:null,
    };
  },
  methods: {
    reload() {
      this.RouterState = false;
      this.$nextTick(() => {
        this.RouterState = true;
      });
    },
  },
};
script>

<style>
html,
body {
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
#app {
	width: 100%;
	min-height: 100%;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
style>

完结撒花