80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
最新回答
不与情长
2022-10-11 15:14:51
一、水印概览
水印在网页设计中的应用，主要作用在于保护版权、防止篡改以及增强页面视觉效果。然而，添加水印也需注意可能对用户体验带来的影响。
二、技术方案
1. 使用第三方库 watermark
优势：利用已存在的 GitHub 库简化开发，可直接集成图片水印功能。然而，该库可能较为陈旧，不支持文案水印、多行水印且可能增加 SDK 负担。
2. 自定义 JS 实现
优势：提供对图片和文案水印的支持，且通过封装函数实现，轻量级。
三、水印功能实现
1. 需求说明
明确功能需求，包括水印的类型、位置、透明度、尺寸等。
2. 实现步骤
通过定义 setWaterMarker 方法，实现水印的添加。此方法接收包含水印参数的对象作为输入。
3. 深入细节
3.1 setWaterMarker
该方法负责绘制水印，参数对象包含水印内容、位置、透明度等属性。
3.2 getRatio
获取 canvas 的像素比，以确保绘制出更清晰、更精确的水印。
3.3 setDomCSSAttr
定义 CSS 属性，用于调整水印的样式，如设置透明度、位置等。
3.4 mix-blend-mode
利用 CSS 的 mix-blend-mode 属性，实现水印与页面背景的混合，创建多种视觉效果。
四、水印使用案例
1. 单一文字水印
通过指定文本内容和样式，实现简洁的文字水印。
2. 多行文字水印
支持多个文本行，实现更丰富的信息展示。
3. 图片水印
利用图片作为水印，提升设计感与个性。
4. 文字与图片结合
将文字和图片结合使用，创造独特的视觉效果。
5. 多行水印与图片混合使用
结合多行文字与图片水印，构建多样化的页面布局。
五、总结
通过以上80行JS代码的实现方案，开发者能够轻松实现页面中文字、图片、多行文字以及它们结合的水印效果，既保护版权又增强页面的视觉吸引力。
热门标签
