HTML5添加图片水印的技巧分享

**HTML5添加图片水印的实用方法：前端轻松实现，告别服务器依赖** 还在为图片版权保护烦恼吗？本文介绍一种基于HTML5 Canvas的图片水印添加方案，无需服务器端处理，即可在浏览器端轻松实现文字或图像水印。通过Canvas绘图技术，将水印叠加到原图上，并利用`fillText()`绘制文字水印，或叠加半透明Logo图片作为图像水印。同时，文章还详细讲解了实现步骤，包括创建canvas、加载图片、设置字体样式与透明度等关键代码，并提供示例代码参考。此外，还需注意跨域问题、CORS支持、移动端性能及大图内存消耗等前端实现注意事项，确保兼容性和用户体验。使用HTML5 Canvas，前端可以直接在浏览器中完成图片水印的合成，操作灵活且响应快速，适合轻量级水印需求场景。

答案：通过HTML5 Canvas可在浏览器中实现图片水印。1. 创建canvas并获取上下文；2. 加载原图并绘制到canvas；3. 设置字体样式与透明度，用fillText添加文字水印；4. 可叠加半透明Logo图片作为图像水印；5. 使用toDataURL导出结果。注意跨域问题、CORS支持、移动端性能及大图内存消耗。

在HTML5网页中实现图片水印效果，可以通过Canvas绘图技术将文字或图像叠加到原图上，从而生成带水印的图片。这种方法无需依赖服务器端处理，用户可在浏览器中实时完成水印添加。

使用Canvas绘制文字水印

Canvas是HTML5提供的绘图API，适合用于图像处理。通过它可以在图片上绘制透明文字作为水印。

示例代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'original.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  ctx.font = 'bold 30px Arial';
  ctx.fillStyle = 'rgba(255,255,255,0.5)';
  ctx.fillText('版权所有', 50, 50);
  const watermarked = canvas.toDataURL('image/jpeg');
  // 可将watermarked赋值给img标签显示
}

添加图像水印（Logo水印）

除了文字，也可以叠加一个小的Logo图片作为水印。

关键代码片段：

const logo = new Image();
logo.src = 'logo.png';
logo.onload = function() {
  ctx.globalAlpha = 0.6; // 设置透明度
  ctx.drawImage(logo, 10, 10, 80, 40); // 绘制小尺寸Logo
  ctx.globalAlpha = 1.0; // 恢复默认
}

前端实现注意事项

虽然Canvas能实现水印功能，但需注意以下几点以确保兼容性和用户体验。