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

更新时间：2024年03月15日 09:52:49 作者：整天敲代码的小韩

图片加水印是一种常见的图像处理技术,通常用于保护版权、防止盗用、增加图片的识别度等多种场景,这篇文章主要给大家介绍了关于使用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, '水印文字')

总结：

在本篇博客中，我们学习了如何使用JavaScript给图片添加水印，并将其封装成一个可重复使用的函数。通过使用canvas元素和相关的绘图API，我们可以实现图像处理和增强效果。

到此这篇关于使用JavaScript给图片添加水印实现方法封装的文章就介绍到这了,更多相关JS图片添加水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

参考资料：

您可能感兴趣的文章:

js插件YprogressBar实现漂亮的进度条效果
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的，响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条，圆形和方形等几个内置的形状，但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
2015-04-04
SwfUpload在IE10上不出现上传按钮的解决方法
在测试中发现使用了SwfUpload实现的无刷新上传功能，在IE10上竟然无法使用了，难道SwfUpload不支持吗？下面与大家分享下通过修改SwfUplad.JS文件让其支持ie10
2013-06-06
javaScript代码飘红报错看不懂？读完这篇文章再试试
这篇文章主要介绍了javaScript代码飘红报错看不懂？读完这篇文章再试试,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下
2017-04-04
JavaScript双向链表实现LRU缓存算法的示例代码
本文主要介绍了JavaScript双向链表实现LRU缓存算法的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
非常不错的一个javascript 类
[绿色]非常不错的一个javascript 类...
2006-11-11
一文详细说一说Map和WeakMap的区别(面试官常问)
这篇文章主要介绍了Map和WeakMap区别的相关资料,Map和WeakMap都是JavaScript中的键值对数据结构,它们的主要区别在于其键的存储方式和内存管理,需要的朋友可以参考下
2026-03-03
js Clip奇思妙想之多彩渐变字效果
本篇我们用同样的原理，把文字用CLIP属性分的更细，分别着色，然后组合到一起，实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素，所以这里我们要用程序来控制，自动生成这些元素。
2008-11-11
js弹出窗口返回值的简单实例
下面小编就为大家带来一篇js弹出窗口返回值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JS图片懒加载的优点及实现原理
这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01