如何优雅的给网站加水印
csdh11 2024-12-02 16:39 25 浏览
当我们的项目开发完成之后通常要做一个演示网站,那么如何防止我们辛苦开发的网站被别人滥用呢?我们可以通过在网页上添加水印来注明所有人的信息,像下面这个样子。
那么如何添加水印呢,今天就来介绍三种比较常用的添加水印的方法。下面所有的网页都以若依的后台管理系统为例。
利用CSS样式添加水印
添加的水印效果如图所示
具体做法是我们定义一个水印的样式——
floating-watermark,然后在需要被添加水印的标签中引用这个样式。样式案例如下:
.floating-watermark {
position: fixed;//这个属性使元素相对于浏览器窗口固定定位,这意味着即使页面滚动,元素也会保持在固定位置 top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
//这个属性设置了元素的背景图像。在这里,使用了一个数据URI来嵌入一个SVG图像。这个SVG图像包含了倾斜的“测试水印”文字
background-image: url('data:image/svg+xml;utf8,<svg xmlns="SVG namespace" width="400" height="400"><text x="50" y="200" font-size="30" fill="rgba(0, 0, 0, 0.1)" transform="rotate(-45, 50, 200)">测试水印</text></svg>');
background-repeat: repeat;
z-index: 1000;//这个属性设置了水印的图层,值越大则越靠上
}
Canvas元素添加水印
使用Canvas来创建满屏倾斜的水印文字涉及到在Vue组件中使用JavaScript来动态绘制水印。效果如下。
具体做法是在js中定义一个绘制水印的方法——drawWatermark,然后在组件的mounted生命周期钩子中调用drawWatermark方法,以确保在组件加载时绘制并显示水印。样例写法如下。
drawWatermark() {
let canvas = document.createElement('canvas');
const spacing = 300; // 水印间的间距
canvas.width = window.innerWidth * 2; // Canvas的宽度为视口宽度的两倍
canvas.height = window.innerHeight * 2; // Canvas的高度为视口高度的两倍
let ctx = canvas.getContext('2d');
ctx.font = '30px Arial'; // 字体大小
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字体颜色和透明度
ctx.rotate(-Math.PI / 4); // 将文字旋转45度
?
// 在Canvas上重复绘制倾斜的文字
for (let x = -canvas.width; x < canvas.width; x += spacing) {
for (let y = -canvas.height; y < canvas.height; y += spacing) {
ctx.fillText('测试水印', x, y);
}
}
?
// 创建一个新的div元素用于显示水印
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
style.top-正在西部数码(www.west.cn)进行交易 = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.zIndex = '9999'; // 设置高z-index值
?
document.body.appendChild(watermarkDiv);
}
第三方工具库添加水印
最后一种方法是利用第三方工具库来实现添加水印的效果,这里我推荐
vue-watermark-directive组件。效果如图所示。
首先我们需要安装vue-watermark-directive组件。
npm install vue-watermark-directive --save
然后在项目中引用组件,修改main.js
import VueWatermark from 'vue-watermark-directive';
最后在标签中使用
<div class="app-container" v-watermark="'测试水印'">
总结
这三种方法中Canvas使用灵活,CSS方法和第三方组件简单易用,大家可以根据自己项目的情况选择一种使用。
更多文章推荐公众号【程序员老J】
相关推荐
- 用Python轻松修改Word文件的作者和时间,打造自己的专属效率工具
-
你是否曾经遇到过需要批量修改Word文件的作者、创建时间或修改时间的情况?手动操作不仅费时费力,还容易出错。可以用Python编写一个小工具,轻松解决这个问题!无论你是编程新手还是有一定经验的...
- 插件开发js代码划分(js插件编写)
-
在开发Chrome插件时,将JavaScript代码拆分成多个模块而非集中放置,主要基于性能优化、可维护性提升和浏览器插件特性适配等多方面的考量。以下是具体原因及区别分析:一、拆分的核心原因...
- 5分钟掌握Python中的标准输入、标准输出、标准错误
-
读取用户输入从标准输入获取输入:user_input=input("Impartyourwisdom:")print(f"Youshared:{user_input}")...
- 高大上的解答:在 'packages.pyi' 中找不到引用 'urllib3'
-
DeepSeek的一句代码:...
- Flask 入门教程(flask快速入门)
-
目录什么是Flask?环境配置与安装第一个Flask应用:HelloWorld路由与视图函数模板与Jinja2表单处理与用户输入...
- 每日一库之 Go 语言开发者的神器—Gotx
-
点击上方蓝色“Go语言中文网”关注我们,领全套Go资料,每天学习Go语言简介Gotx是一个Go语言(Golang)的解释器和运行环境,只有单个可执行文件,绿色、跨平台,无需安装任何Go语言环境就可...
- MySQL性能调优工具包制作(mysql性能调整)
-
一、最终工具包内容mysql_tuning_toolkit/├──scripts/#核心脚本│├──sysbench-pro.sh#...
- 掌握TensorFlow核心用法:从安装到实战的完整指南
-
一、为什么TensorFlow值得学习?作为全球使用最广泛的开源机器学习框架,TensorFlow已累计获得超过17万GitHub星标,支撑着Google搜索、Waymo自动驾驶、NASA卫星图像分析...
- 如何把PY 打包成EXE安装文件(pypy 打包exe)
-
将Python脚本打包成EXE文件通常使用第三方工具实现,以下是详细步骤和注意事项:...
- Pygame Zero 详细使用教程(python zerorpc)
-
PygameZero是一个基于Pygame的简化游戏开发框架,特别适合初学者和快速原型开发。它隐藏了许多底层的复杂性,使得开发者可以更专注于游戏逻辑的实现。本文将通过分析提供的代码,详细介绍如...
- Stable diffusion AI画图辅助脚本 Script 的使用(二)
-
本篇为脚本使用介绍的第二部分,主要介绍Promptmatrix提示词矩阵以及UltimateSDUpscale终极SD放大这两个脚本,同时也简单介绍一下如何编写自己的脚本。1、Promp...
- 一文明白Python 的import如何工作
-
Pythonimport系统的基础知识Python的import系统是该语言设计的关键部分,允许模块化编程和代码的轻松重用。了解这个系统对任何Python程序员都很重要,因为它决定了代码的结构...
- Highlight.js - 前端的代码语法高亮库
-
千辛万苦写了篇技术分享,贴了一堆代码,兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字,字体还难看得很,你瞬间就没了兴致。能不能让网页也能像IDE那样,做带语法高亮的炫酷显示呢?来看一...
- xbox xsx/s ps2模拟器 战神12,北欧女神2 配置教程
-
xsxxss下载PS2独立模拟器,Retroarch全能模拟器地址。...
- RetroArch 着色器、金手指怎么用? 重返复古游戏萤幕滤镜效果
-
自从上次分享RetroArch模拟器的一些技巧后,许多模拟器新用户对老旧游戏机感到好奇,为什么游戏画面看起来会有很多马赛克。这主要是因为当年的游戏开发商是针对当时的屏幕进行设计的,所以在现在的高分辨率...
- 一周热门
- 最近发表
-
- 用Python轻松修改Word文件的作者和时间,打造自己的专属效率工具
- 插件开发js代码划分(js插件编写)
- 5分钟掌握Python中的标准输入、标准输出、标准错误
- 高大上的解答:在 'packages.pyi' 中找不到引用 'urllib3'
- Flask 入门教程(flask快速入门)
- 每日一库之 Go 语言开发者的神器—Gotx
- MySQL性能调优工具包制作(mysql性能调整)
- 掌握TensorFlow核心用法:从安装到实战的完整指南
- 如何把PY 打包成EXE安装文件(pypy 打包exe)
- Pygame Zero 详细使用教程(python zerorpc)
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 反恐24小时电话铃声 (33)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)