使用JavaScript給圖片添加水印的實現(xiàn)方法封裝

更新時間：2024年03月15日 09:52:49 作者：整天敲代碼的小韓

圖片加水印是一種常見的圖像處理技術,通常用于保護版權、防止盜用、增加圖片的識別度等多種場景,這篇文章主要給大家介紹了關于使用JavaScript給圖片添加水印的實現(xiàn)方法封裝,需要的朋友可以參考下

前言

當涉及圖片處理時，JavaScript是一種強大的工具。在本篇博客中，我們將學習如何使用JavaScript來給圖片添加水印，并將其封裝成一個函數(shù)，以便在需要的時候重復使用。

準備工作：

在開始之前，確保你已經(jīng)準備好了以下內(nèi)容：

1.一張待添加水印的圖片。

2.水印圖片。

3.一個基本的HTML文件和一個連接到JavaScript文件的script標簽。

添加水印效果：

首先，我們需要編寫一個函數(shù)，用于添加水印到圖片上。以下是一個示例函數(shù)：

function addWatermark(imagePath, watermarkPath) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  // 創(chuàng)建一個新的Image對象，用于加載原始圖片
  var image = new Image();
  image.src = imagePath;

  // 在圖片加載完成后執(zhí)行下面的代碼
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;

    // 將原始圖片繪制到canvas上
    context.drawImage(image, 0, 0);

    // 創(chuàng)建一個新的Image對象，用于加載水印圖片
    var watermark = new Image();
    watermark.src = watermarkPath;

    // 在水印圖片加載完成后執(zhí)行下面的代碼
    watermark.onload = function() {
      // 設置水印的位置和尺寸
      var x = 0;
      var y = 0;
      var width = image.width;
      var height = image.height;

      // 平鋪水印圖片
      context.fillStyle = context.createPattern(watermark, 'repeat');
      context.fillRect(x, y, width, height);

      // 將帶有水印的圖片轉換為base64格式
      var watermarkedImage = canvas.toDataURL();

      // 將base64格式的圖片顯示在頁面上或進行其他操作
      // 例如：document.getElementById('result').src = watermarkedImage;
    };
  };
}

這個函數(shù)使用了HTML5的canvas元素來實現(xiàn)。它首先創(chuàng)建一個新的canvas元素，并通過getContext('2d')獲取2D繪圖上下文。然后，它加載原始圖片和水印圖片，并在加載完成后進行處理。

在加載原始圖片后，我們將其繪制到canvas上。接著，加載水印圖片并在加載完成后執(zhí)行代碼。在這里，我們使用context.createPattern()方法創(chuàng)建了一個平鋪的圖案，并使用fillRect()方法將其繪制到canvas上。

最后，我們可以將帶有水印的圖片轉換為base64格式，并進行進一步的展示或處理。

使用封裝的函數(shù) ：

要使用上面的函數(shù)，你需要在HTML文件中調(diào)用它，并傳遞原始圖片和水印圖片的路徑作為參數(shù)。以下是一個簡單的示例：

確保將函數(shù)所在的JavaScript文件引入到HTML文件中，并將原始圖片和水印圖片的路徑替換為實際的路徑。

<!DOCTYPE html>
<html>
<head>
  <title>添加水印</title>
</head>
<body>
  <script src="watermark.js"></script>
  <script>
    addWatermark('path/to/original/image.jpg', 'path/to/watermark.png');
  </script>
</body>
</html>

附：加文字水印

示例代碼：

  function blobToImg(blob) {
    return new Promise((resolve, reject) => {
      let reader = new FileReader()
      reader.addEventListener('load', () => {
        let img = new Image()
        img.src = reader.result
        img.addEventListener('load', () => resolve(img))
      })
      reader.readAsDataURL(blob)
    })
  }

  function imgToCanvas(img) {
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    return canvas
  }

  function watermark(canvas, text) {
    return new Promise((resolve, reject) => {
      let ctx = canvas.getContext('2d')
      // 設置填充字號和字體，樣式
      ctx.font = "24px 宋體"
      ctx.fillStyle = "#FFC82C"
      // 設置右對齊
      ctx.textAlign = 'right'
      // 在指定位置繪制文字，這里指定距離右下角20坐標的地方
      ctx.fillText(text, canvas.width - 20, canvas.height - 20)
      canvas.toBlob(blob => resolve(blob))
    })
  }

  function imgWatermark(dom, text) {
    let input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.onchange = async () => {
      let img = await blobToImg(input.files[0])
      let canvas = imgToCanvas(img)
      let blob = await watermark(canvas, text)
      let newImage = await blobToImg(blob)
      dom.appendChild(newImage)
    }
    dom.appendChild(input)
  }

  let dom = document.querySelector('#container')
  imgWatermark(dom, '水印文字')