使用JavaScript给图片添加水印的实现方法封装_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>

附：加文字水印

示例代码：

  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, '水印文字')