使用JS在图片上添加水印效果的实现方法

"这篇文章主要介绍了如何使用JavaScript通过创建层（layer）来实现在图片上添加水印的效果。通过JavaScript获取图片的位置信息，然后创建一个绝对定位的div元素作为水印层，放置在图片上方，从而实现水印效果。同时，当窗口大小改变时，页面会自动重载以适应新的布局。" 在网页设计中，添加水印是一种常见的需求，它可以用来保护版权或增加品牌标识。本文介绍的方法是利用JavaScript动态生成水印，这相比静态添加水印更加灵活，可以适应不同尺寸的图片和页面布局。 首先，我们分析提供的代码片段。在HTML部分，可以看到存在多个`<img>`标签用于显示图片。每个图片都有一个唯一的ID，例如`MyImage2`、`MyImage3`等，这是为了方便JavaScript访问这些元素。 接着是JavaScript部分： 1. `getDim(el)` 函数：这个函数用于获取指定元素（在这里是图片）相对于文档的左上角的坐标。它通过遍历元素的offsetParent属性，累加offsetLeft和offsetTop值，直到没有父元素为止。返回一个对象，包含x和y两个属性，表示元素的左上角坐标。 2. `createLayer(el)` 函数：这是实现水印的核心函数。它接收一个图片元素作为参数，调用`getDim()`获取图片的位置，然后在文档中插入一个`<div>`元素，设置其样式为绝对定位，z-index设为1（确保水印层位于图片上方），并将其位置设置为与图片相同。`<div>`的内容是水印文本（在示例中为"ˮӡ"）。 3. `window.onresize` 事件处理函数：当浏览器窗口大小发生变化时，页面会重新加载，确保水印仍然与图片对齐。 最后，代码中`createLayer()`函数被调用，传入`document.images.MyImage2`作为参数，为这个图片添加水印。其他图片如`MyImage3`、`MyImage4`等，如果需要添加水印，也可以按相同方式调用`createLayer()`。 总结一下，通过这种方式实现图片水印，我们需要： 1. 定义图片元素，并为其分配唯一的ID。 2. 编写JavaScript函数，获取图片的位置信息，并创建一个覆盖在图片上的绝对定位div，作为水印层。 3. 在窗口大小变化时，重新加载页面以保持水印与图片的对齐。 4. 调用`createLayer()`函数，传入图片元素，为每个需要添加水印的图片执行此操作。 这种方法适用于动态生成水印，但需要注意，由于是动态创建，所以水印不会在页面加载时立即可见，可能需要一些时间。另外，这种方法不适用于图片的打印或者右键保存，如果需要防止图片被盗用，还需要结合服务器端的处理。