使用JavaScript为图片添加水印效果

"通过JavaScript实现图片水印效果" 在网页设计中，添加水印是一种常见的需求，可以用于保护版权或者增加品牌标识。本示例通过JavaScript实现了一个简单的图片水印功能，主要涉及了DOM操作、CSS定位以及页面重载处理。以下将详细解析这个过程。 1. **DOM操作**： - `getElementById`: 通过`document.getElementById`获取指定ID的HTML元素，例如`MyImage2`、`MyImage3`和`MyImage4`，这些都是我们要添加水印的图片。 - `offsetParent`和`offsetLeft/offsetTop`: 这两个属性用于获取元素相对于其最近的定位祖先元素的偏移量，用于计算水印的位置。 - `createLayer`函数：这个函数是核心，它创建了一个新的`<div>`元素作为水印，并将其定位在图片的相应位置上。 2. **CSS定位**： - `position: absolute`: 使水印`<div>`元素脱离正常文档流，根据其相对于最近的定位祖先元素的位置进行定位。 - `z-index: 1`: 设置水印的堆叠顺序，确保水印位于图片之上。 - `left/top`: 根据`getDim`函数返回的坐标值设置水印的位置。 3. **获取图片尺寸**： - `getDim`函数：遍历元素的`offsetParent`链，累加`offsetLeft`和`offsetTop`来获取元素相对于视口的绝对位置。这个函数用于确定水印的初始位置。 4. **页面重载处理**： - `window.onresize`事件：当窗口大小发生变化时，重新加载页面以更新水印的位置。这是因为原始代码没有动态调整水印位置的机制，所以页面大小改变后，水印位置可能不再正确。在实际应用中，可能会更希望动态调整水印的位置，而不是简单地重新加载页面。 5. **创建水印**： - 在`createLayer`函数中，使用`document.writeln`向HTML中插入新的`<div>`元素，其中包含水印文本"ˮӡ"。这里的水印是静态文本，若要实现动态水印（如图片水印），则需要进一步修改代码，将图片作为背景或者内联元素插入到`<div>`中。 6. **优化建议**： - 对于页面重载，可以考虑监听`resize`事件并实时更新水印的位置，而不是每次窗口大小改变都刷新整个页面，这将提高用户体验。 - 水印的样式可以通过CSS类来控制，这样可以更方便地调整字体、颜色、透明度等属性。 - 考虑到性能，如果页面中有大量图片需要添加水印，可以使用事件委托或批量处理，避免频繁操作DOM。 这个例子展示了如何使用JavaScript和CSS在网页图片上添加静态文本水印，但还有优化空间以适应更多场景和提高性能。在实际开发中，可以根据需求进行相应的调整和扩展。