使用JavaScript给图片添加图片水印的前端实现方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用JavaScript给图片添加图片水印的前端实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当涉及图片处理时，JavaScript是一种强大的工具。在本篇博客中，我们将学习如何使用JavaScript来给图片添加水印，并将其封装成一个函数，以便在需要的时候重复使用。

准备工作：

在开始之前，确保你已经准备好了以下内容：

1.一张待添加水印的图片。

2.水印图片。

3.一个基本的HTML文件和一个连接到JavaScript文件的script标签。

添加水印效果：

首先，我们需要编写一个函数，用于添加水印到图片上。以下是一个示例函数：

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

  // 创建一个新的Image对象，用于加载原始图片
  var image = new Image();
  image.src = imagePath;

  // 在图片加载完成后执行下面的代码
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;

    // 将原始图片绘制到canvas上
    context.drawImage(image, 0, 0);

    // 创建一个新的Image对象，用于加载水印图片
    var watermark = new Image();
    watermark.src = watermarkPath;

    // 在水印图片加载完成后执行下面的代码
    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;
    };
  };
}

        这个函数使用了HTML5的canvas元素来实现。它首先创建一个新的canvas元素，并通过getContext('2d')获取2D绘图上下文。然后，它加载原始图片和水印图片，并在加载完成后进行处理。

        在加载原始图片后，我们将其绘制到canvas上。接着，加载水印图片并在加载完成后执行代码。在这里，我们使用context.createPattern()方法创建了一个平铺的图案，并使用fillRect()方法将其绘制到canvas上。

        最后，我们可以将带有水印的图片转换为base64格式，并进行进一步的展示或处理。

使用封装的函数：

要使用上面的函数，你需要在HTML文件中调用它，并传递原始图片和水印图片的路径作为参数。以下是一个简单的示例：

确保将函数所在的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>