使用JavaScript给图片添加水印的实现方法封装

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;
    };
  };
}

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