寫個給圖片加水印的方法

王铁柱6發表於2024-11-27

前端新增水印的方法有很多，以下是幾種常見且比較有效的方法，並附帶 JavaScript 程式碼示例：

1. 使用 Canvas 繪製水印:

這是最常用的方法，靈活度高，可以自定義水印的樣式、位置和透明度。

function addWatermark(imageUrl, watermarkText, options = {}) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 允許跨域圖片載入
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;

      ctx.drawImage(img, 0, 0);

      const {
        font = '16px sans-serif',
        color = 'rgba(0, 0, 0, 0.5)',
        position = 'bottom-right',
        offsetX = 10,
        offsetY = 10,
      } = options;

      ctx.font = font;
      ctx.fillStyle = color;

      let x, y;
      switch (position) {
        case 'top-left':
          x = offsetX;
          y = offsetY + parseInt(font, 10); // 偏移量加上字型大小
          break;
        case 'top-right':
          x = canvas.width - ctx.measureText(watermarkText).width - offsetX;
          y = offsetY + parseInt(font, 10);
          break;
        case 'bottom-left':
          x = offsetX;
          y = canvas.height - offsetY;
          break;
        case 'bottom-right':
          x = canvas.width - ctx.measureText(watermarkText).width - offsetX;
          y = canvas.height - offsetY;
          break;
        default:
          x = offsetX;
          y = offsetY;
      }

      ctx.fillText(watermarkText, x, y);

      resolve(canvas.toDataURL());
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}


// 使用示例:
addWatermark('image-url.jpg', '我的水印', {
  font: '20px Arial',
  color: 'rgba(255, 0, 0, 0.3)',
  position: 'top-left',
}).then(watermarkedImageUrl => {
  const img = document.createElement('img');
  img.src = watermarkedImageUrl;
  document.body.appendChild(img);
}).catch(error => {
  console.error('新增水印失敗:', error);
});

2. 使用偽元素(pseudo-element)::before 或 ::after:

這種方法適用於在圖片容器上新增簡單的文字或圖示水印，比較方便，但樣式控制不如 Canvas 靈活。

.watermarked-image {
  position: relative;
}

.watermarked-image::before {
  content: '我的水印';
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

/*  HTML */
<div class="watermarked-image">
  <img src="image-url.jpg" alt="Image">
</div>

3. 使用 SVG 作為水印:

SVG 水印可以實現更復雜的圖形和效果，並且縮放時不會失真。

//  建立一個 SVG 元素並新增到圖片容器中
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = '我的水印';
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
svg.appendChild(text);

const imageContainer = document.querySelector('.watermarked-image');
imageContainer.appendChild(svg);

**4. 使用背景圖片作為水印

相關文章