vue项目添加全局水印或某个指定页面水印源码

Bertha 。 2022-11-14 13:23 442阅读 0赞

vue项目的页面添加水印,效果如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70][]

index.vue

import watermark from "./watermark";
    mounted() {
        watermark.set('我是水印啦');
    },
    destroyed() {
        watermark.set(''); //为了清除页面返回时，其它页面也有水印
    },

watermark.js

let watermark = {}
     
    let setWatermark = (str) => {
     let id = '1.23452384164.123412416';
     
     if (document.getElementById(id) !== null) {
     document.body.removeChild(document.getElementById(id));
     }
     
     //创建一个画布
     let can = document.createElement('canvas');
     //设置画布的长宽
     can.width = 120;
     can.height = 120;
     
     let cans = can.getContext('2d');
     //旋转角度
     cans.rotate(-15 * Math.PI / 180);
     cans.font = '18px Vedana';
     //设置填充绘画的颜色、渐变或者模式
     cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
     //设置文本内容的当前对齐方式
     cans.textAlign = 'left';
     //设置在绘制文本时使用的当前文本基线
     cans.textBaseline = 'Middle';
     //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
     cans.fillText(str, can.width / 8, can.height / 2);
     
     let div = document.createElement('div');
     div.id = id;
     div.style.pointerEvents = 'none';
     div.style.top = '30px';
     div.style.left = '0px';
     div.style.position = 'fixed';
     div.style.zIndex = '0';
     div.style.width = document.documentElement.clientWidth + '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);
     }
     }, 500);
     window.onresize = () => {
     setWatermark(str);
     };
    }
     
    export default watermark;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70]: /images/20221022/86ce237fe8214fea9c1df7e9c1d5546a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 java 图片添加水印(文字水印+图片水印)

一、图片水印(水印文件覆盖到源文件上) / @param buffImg 源文件(BufferedImage) @par

曾经终败给现在/ 2023年01月09日 15:50/ 0 赞/ 455 阅读

相关 vue项目添加全局水印或某个指定页面水印源码

vue项目的页面添加水印,效果如图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

Bertha 。/ 2022年11月14日 13:23/ 0 赞/ 443 阅读

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

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

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

相关添加水印

/\ \ 功能：PHP图片水印 (水印支持图片或文字) \ 参数： \$groundImage 背景图片，即需要加水印的图片，暂只支持GIF,JPG,PNG格式； \$

r囧r小猫/ 2022年09月21日 05:33/ 0 赞/ 456 阅读

相关 vue项目水印添加

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

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

相关 java 添加水印清除水印

在学生时代便实现java打水印的程序，现在工作却找不到曾经写的代码，记录下来方便以后使用。先谈谈需求： ①一张图片可以被多张logo打水印，但一张图片只能打一个水印，避免

电玩女神/ 2022年07月21日 01:26/ 0 赞/ 527 阅读

相关页面添加水印

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="statics/libs/j

小鱼儿/ 2022年05月26日 21:20/ 0 赞/ 440 阅读

相关 vue 在页面上添加水印

这是效果图： ![20190223175627429.png][] 将下列代码从开始到结束的代码复制到一个新建的js文件中，然后在需要使用的页面 impor

拼搏现实的明天。/ 2022年03月17日 09:54/ 0 赞/ 617 阅读

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

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

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

相关给html页面添加水印

看到别人的页面有水印，感觉很有趣尝试了下给html加水印的效果，如图 ![format_png][] 实现原理：　　根据页面大小，动态添加若干个div，将传递过来的

秒速五厘米/ 2021年07月26日 12:18/ 0 赞/ 1079 阅读