当前位置：首页 > news >正文

VUE页面添加水印

news 来源：原创 2024/5/7 0:57:14

let watermark = {};
let setWatermark = (text, sourceBody) => {
    let id = 'watermark_fjq_' + parseInt(Math.random() * 100000);
    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }
    //水印图片
    let can = document.createElement('canvas');
    can.width = 373;// 单个水印大小
    can.height = 320;// 单个水印大小
    let cans = can.getContext('2d');
    cans.rotate(-20 * Math.PI / 180);
    cans.font = '14px Vedana';
    cans.fillStyle = '#DCDCDC';//水印颜色
    cans.textAlign = 'left';
    cans.textBaseline = 'Middle';
    cans.fillText(text, can.width / 20, can.height);//水印在画布的位置
    //设置插入div样式
    let water_div = document.createElement('div');
    water_div.id = id;
    water_div.style.pointerEvents = 'none';//水印层事件穿透 让水印不阻止交互事件
    water_div.style.overflow = 'hidden';
    water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    if (sourceBody) {
        sourceBody.style.position = 'relative';
        water_div.style.width = '100%';
        water_div.style.height = '100%';
        water_div.style.position = 'absolute';
        water_div.style.top = '0';
        water_div.style.left = '0';
        sourceBody.appendChild(water_div);
    } else {
        water_div.style.top = '3px';
        water_div.style.left = '0px';
        water_div.style.position = 'fixed';
        water_div.style.zIndex = '0';
        water_div.style.width = document.documentElement.clientWidth + 'px';
        water_div.style.height = document.documentElement.clientHeight + 'px';
        document.body.appendChild(water_div);
    }
    return id;
}

/**
 *  该方法只允许调用一次
 *  @param:
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
watermark.set = (text, sourceBody) => {
    setTimeout(() => {
        setWatermark(text, sourceBody);
    }, 1000);//延迟加载
}

export default watermark;

水印原理：前端水印的实现原理主要是利用canvas标签的一些属性,把水印图片作为div的背景图片

创建canvas元素
给canvas绘制文本，填充样式旋转角度、文字字体颜色等
将绘制好的canvas元素转换成base64格式的图片
动态创建一个div标签，相对位置属性为fixed，宽高设置为屏幕的可见大小，将上一步canvas转换的图片设置为div的背景图片并平铺满整个内部
最后将动态创建的div添加到body中sourceBody是添加的位置

注意点

好不容易在画布中绘制出酷炫的图形，应该把它保存起来吧。但不幸的是，画布中的这些图形本身不是真正的图片，不能直接保存。不幸中的万幸，Canvas API提供了toDataURL()方法，可以把画布中的图形转换为图片，

默认情况下，toDataURL()方法把图形转变成base64编码格式的png，然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数，将画布转变成其它格式的图片。

有了Data URL数据后，就可将这些数据直接填充到<img>元素里，或者直接从浏览器里下载它们。这里通过一个实例，来说明如何使用toDataURL()方法，把整个画布保存为图片

局部页面使用：把warterMarkVUE.js文件引用到单页面内即可使用

全局使用：在App.vue中引用，

import watermark from "./warterMarkVUE";
mounted() {
    this.staffName =
      JSON.parse(sessionStorage.getItem("userInfo")) &&
      JSON.parse(sessionStorage.getItem("userInfo")).staffName
        ? JSON.parse(sessionStorage.getItem("userInfo")).staffName
        : "";
    this.staffCode =
      JSON.parse(sessionStorage.getItem("userInfo")) &&
      JSON.parse(sessionStorage.getItem("userInfo")).staffCode
        ? JSON.parse(sessionStorage.getItem("userInfo")).staffCode
        : "";
    var timer = this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
    if (
      JSON.parse(sessionStorage.getItem("userInfo")) &&
      JSON.parse(sessionStorage.getItem("userInfo")).staffName
    ) {
      watermark.set(this.staffCode + " " + this.staffName + " " + timer); //设置水印名称
    }
  },

前端添加水印效果攻略【vue和原生js添加方式】_水香木鱼的博客-CSDN博客_前端页面使用js水印功能
vue实现为页面加水印 - 范斯 - 博客园
前端添加水印效果攻略【vue和原生js添加方式】_水香木鱼的博客-CSDN博客_前端页面使用js水印功能
前端页面添加水印_泡泡大怪兽的博客-CSDN博客_网页增加水印
vue实现给页面添加水印_前端搬砖王妹妹的博客-CSDN博客_vue页面添加水印
vue全局加水印（除登录页面）_陈噜啦的博客-CSDN博客_vue 加水印