当前位置：首页 > JavaScript

js 实现图片水印

2026-04-04 09:10:39JavaScript

实现图片水印的方法

使用Canvas绘制水印

Canvas是HTML5提供的绘图API，可以通过JavaScript动态生成水印并叠加到图片上。

function addWatermark(imageSrc, watermarkText, callback) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = imageSrc;

  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0);
    ctx.font = '30px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(watermarkText, img.width/2, img.height/2);

    callback(canvas.toDataURL('image/png'));
  };
}

// 使用示例
addWatermark('image.jpg', 'Watermark', function(watermarkedImage) {
  document.getElementById('result').src = watermarkedImage;
});

使用CSS实现水印

对于不需要处理原始图片数据的简单场景，可以使用CSS伪元素实现水印效果。

js 实现图片水印

.watermarked {
  position: relative;
}

.watermarked::after {
  content: "Watermark";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

使用第三方库

对于更复杂的水印需求，可以考虑使用专门的JavaScript库：

watermark.js - 轻量级水印库

js 实现图片水印

watermark(['image.jpg'])
.image(watermark.text.lowerRight('Watermark', '30px Arial', '#fff', 0.5))
.then(function(img) {
 document.body.appendChild(img);
});

Fabric.js - 功能强大的Canvas库

const canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('image.jpg', function(img) {
canvas.add(img);
const text = new fabric.Text('Watermark', {
 left: img.width/2,
 top: img.height/2,
 fill: 'rgba(255,255,255,0.5)',
 fontSize: 30,
 originX: 'center',
 originY: 'center'
});
canvas.add(text);
});

水印安全注意事项

前端水印容易被移除，重要内容应结合后端水印处理
可以考虑使用全屏透明水印或重复平铺水印增加移除难度
对于敏感图片，水印内容可以包含用户唯一标识信息

动态水印实现

可以根据需要生成动态水印，如包含时间或用户信息：

function getDynamicWatermark() {
  const now = new Date();
  return `User ${userId} - ${now.toLocaleString()}`;
}

addWatermark('image.jpg', getDynamicWatermark(), function(result) {
  // 处理结果
});

以上方法提供了从简单到复杂的图片水印实现方案，可以根据具体需求选择适合的方式。