前端添加图片水印

### 前端实现图片水印的方法 在前端开发中，可以通过多种技术手段来实现在图片上添加水印的功能。以下是几种常见的方法及其具体实现： #### 方法一：基于 Canvas 的图像处理 Canvas 是一种强大的 HTML 元素，能够用于绘制图形、操作图像以及应用复杂的视觉效果。通过 Canvas 可以轻松地将文字或其他图案叠加到目标图片之上。 ```javascript function addWatermarkToImage(imageSrc, text) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = imageSrc; image.onload = () => { canvas.width = image.width; canvas.height = image.height; // 绘制原始图片 ctx.drawImage(image, 0, 0); // 设置字体样式并绘制水印文本 ctx.font = '30px Arial'; ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.rotate(-Math.PI / 6); // 斜向角度 ctx.fillText(text, canvas.width * 0.1, canvas.height * 0.8); // 将最终结果导出为新的图片 URL const resultImageUrl = canvas.toDataURL('image/png'); console.log(resultImageUrl); }; } addWatermarkToImage('example.jpg', '版权所有'); // 调用函数 ``` 这种方法的优点在于灵活性高，支持自定义水印的位置、透明度和旋转角度[^1]。 --- #### 方法二：使用 SVG 进行矢量绘图 SVG 提供了一种轻量级的方式来嵌入复杂形状或文字作为水印，并且它天生具有缩放不变形的特点。 ```html <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"> <!-- 插入基础图片 --> <image href="background.png" x="0" y="0" width="400" height="300"/> <!-- 添加水印层 --> <text x="50%" y="70%" font-size="24pt" fill="#FF0000" opacity="0.5" transform="rotate(-45 200 150)"> 版权所有 © </text> </svg> ``` 此方案适合于需要高性能渲染的应用场景，尤其是当页面中有大量静态内容时[^3]。 --- #### 方法三：借助第三方库 Watermark.js 对于更高级的需求，可以直接引入成熟的 JavaScript 库 `watermark.js` 来简化流程。该库提供了丰富的配置选项以便快速生成带水印的效果。 ```javascript window.onload = function() { watermark.init({ watermark_x: 0, watermark_y: 23, watermark_txt: "版权保护", watermark_alpha: 0.315, watermark_width: 280, watermark_height: 20, watermark_y_space: 10, watermark_x_space: 10, watermark_fontsize: "15px", watermark_angle: -20, watermark_color: "#ff0000" }); }; ``` 上述脚本会自动遍历 DOM 中符合条件的所有节点，并为其附加指定样式的水印标记[^2]。 --- ### 总结 以上介绍了三种主流的前端图片加水印的技术路径——分别是利用原生 API (`Canvas`) 手动构建；采用声明式语法 (SVG) 定义结构化数据模型；或者依赖外部插件封装好的解决方案 (`watermark.js`) 。每种都有各自的适用范围及优缺点，在实际项目选型过程中需综合考虑业务需求和技术栈现状做出最佳决策。