JavaScript实现简易的水印覆盖功能

2023年6月10日下午4:10 • JavaScript

实现水印覆盖功能需要使用 JavaScript。下面是实现此功能的完整攻略：

步骤一：创建水印图片

首先需要创建一张水印图片，可以使用 Photoshop 等工具进行制作。水印图片需要保存为 PNG 格式，并且要使用透明背景。在水印图片中可以添加公司名称、版权信息等信息。

步骤二：将水印图片嵌入网页

将水印图片导入网页。可以使用以下代码：

<img src="watermark.png" class="watermark" />

注意，class 属性需要设置为 "watermark"，以便在 JavaScript 中操作。

步骤三：使用 JavaScript 计算水印坐标

使用 JavaScript 计算水印的坐标。通常情况下将水印放在网页中央，并且设置透明度较低。

var watermark = document.querySelector('.watermark');
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
var watermarkWidth = watermark.offsetWidth;
var watermarkHeight = watermark.offsetHeight;

var offsetX = (pageWidth - watermarkWidth) / 2;
var offsetY = (pageHeight - watermarkHeight) / 2;

watermark.style.left = offsetX + 'px';
watermark.style.top = offsetY + 'px';
watermark.style.opacity = 0.2;

以上 JavaScript 代码做了以下事情：

获取水印图片元素
获取当前网页的宽和高
获取水印图片的宽和高
计算水印的位置，并设置 left 和 top 属性
设置水印的透明度

示例一：在图片上添加水印

可以在图片上添加水印，这需要在 HTML 中放置一张图片和水印图片。以下是一个示例：

<div class="image-container">
  <img src="image.png" class="image" />
  <img src="watermark.png" class="watermark" />
</div>

使用 JavaScript 将水印覆盖在图片上：

var image = document.querySelector('.image');
var watermark = document.querySelector('.watermark');

image.onload = function() {
  var offsetX = 20;
  var offsetY = 20;
  watermark.style.left = offsetX + 'px';
  watermark.style.top = offsetY + 'px';
  watermark.style.opacity = 0.2;
};

以上 JavaScript 代码做了以下事情：

获取图片元素和水印图片元素
等待图片加载完毕
计算水印的位置
设置水印的透明度

示例二：在网页上添加水印

可以在整个网页上添加水印，这需要在 HTML 的 body 中放置水印图片。以下是一个示例：

<body>
  <img src="watermark.png" class="watermark" />
  ...
</body>

使用 JavaScript 将水印覆盖在整个网页上：

var watermark = document.querySelector('.watermark');
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
var watermarkWidth = watermark.offsetWidth;
var watermarkHeight = watermark.offsetHeight;

var offsetX = (pageWidth - watermarkWidth) / 2;
var offsetY = (pageHeight - watermarkHeight) / 2;

watermark.style.left = offsetX + 'px';
watermark.style.top = offsetY + 'px';
watermark.style.opacity = 0.2;

以上 JavaScript 代码做了以下事情：