javascript 水印

JavaScript水印是现在很受欢迎的一种网站安全保护措施，它可以在页面上添加一张透明度较高的图片，不影响页面内容的同时，有效防止网站内容被窃取或复制。通过本文的介绍和举例说明，读者将能够更好地了解javascript水印的实现原理和相关技术细节。

在实现JavaScript水印之前，我们首先需要准备一张透明度较高的图形，比如可以是公司名称或者网站的域名等。接着，我们需要在html页面上添加一个div标签，其中包含一个img标签来加载我们准备好的水印图片，并设置其为position: fixed属性，以便让其固定在页面上。

接下来，我们需要编写一段javascript脚本，来实现水印的添加。首先，我们需要确保页面已经完全加载完成。然后，通过document.createElement()方法创建一个新的canvas元素，利用canvas绘图技术，将水印图片绘制到canvas上。设置canvas的opacity属性，并将canvas添加到div容器内。

window.onload = function () {
let watermarkDiv = document.getElementById('watermark');
let canvas = document.createElement('canvas');
canvas.width = watermarkDiv.offsetWidth;
canvas.height = watermarkDiv.offsetHeight;
let ctx = canvas.getContext('2d');
ctx.drawImage(watermarkImg, 0, 0, watermarkImg.width, watermarkImg.height,
0, 0, watermarkDiv.offsetWidth, watermarkDiv.offsetHeight);
canvas.style.opacity = '0.5';
watermarkDiv.appendChild(canvas);
}

为了防止用户通过右键保存图像等方法获取水印图片，我们还可以通过CSS来禁止对水印图片的操作，比如禁止鼠标右键等：

#watermark img {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
pointer-events: none;
}

需要特别说明的是，我们还可以通过动态获取用户IP地址、设备信息等信息加入水印内容，从而进一步提高水印的安全性。

总之，JavaScript水印作为一种简单而有效的网站保护方法，已经被广泛运用于商业和个人网站，通过本文的介绍和示例，读者将可以更好地掌握JavaScript水印的实现过程和技术细节，从而为网站的安全保护工作提供更加可靠的保障。