HTML5+Canvas实现图片添加水印功能

更新时间：2024年11月06日 08:28:07 作者：_XU

在现代Web开发中,图像处理是一个常见的需求,尤其是为图片添加水印,下面我们就来看看如何使用HTML5的Canvas技术为图片添加水印,需要的可以了解下

在现代Web开发中，图像处理是一个常见的需求，尤其是为图片添加水印。水印常用于标记图像的版权、出处或时间信息等。本文将详细介绍如何使用HTML5的Canvas技术为图片添加水印，讲解代码实现的每一个细节，帮助大家理解整个过程，并且能够灵活运用。

一、HTML5 Canvas概述

Canvas是HTML5新增的一个元素，它提供了一个用于动态生成图像的画布环境。通过JavaScript，我们可以在Canvas上绘制图形、文本或图像。Canvas非常适合处理图像编辑、图形绘制、动画等任务。

Canvas的基本用法：

创建Canvas元素：通过HTML中定义<canvas>标签。
获取Canvas上下文：Canvas的绘图操作都是基于其上下文进行的。通过getContext('2d')可以获取一个2D绘图上下文对象，进而执行各种绘图操作。
绘制操作：包括绘制图像、矩形、圆形、路径等。

二、实现代码分析

接下来，我们对代码进行详细的分析，逐步理解每一部分的功能和实现方式。

function addMark(base64, text, currentTime) {
  var img = new Image();
  img.src = base64;
  img.onload = function() {
    // 准备canvas环境
    var canvas = document.getElementById("myCanvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    
    // 绘制图片
    ctx.drawImage(img, 0, 0);

    // 识别左上角颜色
    const imageData = ctx.getImageData(0, 0, 200, 100);
    const leftData = imageData.data;
    let r = 0, g = 0, b = 0, count = 0;
    for (let i = 0; i < leftData.length; i += 4) {
      r += leftData[i];
      g += leftData[i + 1];
      b += leftData[i + 2];
      count++;
    }
    r = Math.floor(r / count);
    g = Math.floor(g / count);
    b = Math.floor(b / count);

    const brightness = r * 0.299 + g * 0.587 + b * 0.144;
    const textColor = brightness > 128 ? "rgba(0, 0, 0,1)" : "rgba(255, 255, 255,1)";
    
    // 绘制水印
    ctx.font = "35px SimHei";
    ctx.fillStyle = textColor;
    ctx.fillText(text, 10, 50);
    ctx.fillText(currentTime, 10, 100);

    let result = canvas.toDataURL("image/jpeg", 0.5);
    return result; // 返回带水印的Base64图像
  };

  img.onerror = function() {
    alert("添加水印出错了~");
  };
};

1. 加载图像

var img = new Image();
img.src = base64;

首先，我们创建一个Image对象，并通过base64格式的图像数据加载图片。base64是将二进制数据编码成ASCII字符的一种方式，常用于图像数据传输和嵌入。

2. 创建Canvas并设置大小

var canvas = document.getElementById("myCanvas");
canvas.width = img.width;
canvas.height = img.height;

通过document.getElementById获取一个HTML中的Canvas元素。随后，我们将Canvas的宽高设置为图片的宽高，以确保图像能够完整地绘制在Canvas中。

3. 绘制图片到Canvas

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

接下来，使用Canvas的drawImage方法将加载的图片绘制到Canvas上。ctx.getContext('2d')方法用于获取Canvas的绘图上下文（2D），然后通过ctx.drawImage将图像绘制到画布的指定位置。

4. 计算图片左上角颜色亮度

const imageData = ctx.getImageData(0, 0, 200, 100);
const leftData = imageData.data;
let r = 0, g = 0, b = 0, count = 0;
for (let i = 0; i < leftData.length; i += 4) {
  r += leftData[i];
  g += leftData[i + 1];
  b += leftData[i + 2];
  count++;
}

为了动态选择水印的颜色，我们通过getImageData方法获取Canvas上的一个区域像素数据。在此代码中，我们选择了Canvas左上角的200x100像素区域，并计算这些像素的RGB值的平均值，以估算图像的亮度。

5. 计算亮度并决定水印颜色

const brightness = r * 0.299 + g * 0.587 + b * 0.144;
const textColor = brightness > 128 ? "rgba(0, 0, 0,1)" : "rgba(255, 255, 255,1)";

通过公式计算出图像的亮度值。为了简单地判断背景色是亮色还是暗色，我们使用了加权平均亮度公式。若亮度大于128，则选择黑色字体；否则，选择白色字体。

6. 绘制水印文字

ctx.font = "35px SimHei";
ctx.fillStyle = textColor;
ctx.fillText(text, 10, 50);
ctx.fillText(currentTime, 10, 100);

此处我们设置了水印文字的字体和大小（35px，使用SimHei字体）。然后，使用fillText方法分别绘制水印的姓名和当前时间，指定了文字的起始坐标。

7. 输出带水印的图像

let result = canvas.toDataURL("image/jpeg", 0.5);
return result;

最后，通过toDataURL方法将Canvas的内容转化为Base64编码的JPEG图片，并设置质量为0.5，返回带有水印的图像数据。

三、总结

通过HTML5的Canvas API，我们能够灵活地为图片添加水印，本文展示的代码为基础的水印添加方案，大家可以根据实际需求进一步扩展功能，如支持动态字体、透明度控制、多个水印等。

到此这篇关于HTML5+Canvas实现图片添加水印功能的文章就介绍到这了,更多相关HTML5 Canvas图片添加水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS定时器实现数值从0到10来回变化
最近做项目遇到一需求要求实现数值从0到10来回变化，下面小编给大家分享下实现代码，需要的朋友参考下
2016-12-12
javascript实现十秒钟后注册按钮可点击的方法
这篇文章主要介绍了javascript实现十秒钟后注册按钮可点击的方法,涉及javascript时间及样式操作的相关技巧,需要的朋友可以参考下
2015-05-05
JavaScript自定义日历效果
这篇文章主要为大家详细介绍了JavaScript自定义日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
javascript实现简单的html5视频播放器
网页视频音频播放器大家并不陌生，在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器，当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天，让我们尝试用HTML5来制作网页播放器吧，毕竟无论是PC还是移动设备，HTML5是未来的趋势
2015-05-05
JavaScript面向对象编程小游戏---贪吃蛇代码实例
这篇文章主要介绍了JavaScript贪吃蛇的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Javascript实现的分页函数
Javascript实现的分页函数...
2007-02-02
JavaScript实现随机替换图片的方法
这篇文章主要介绍了JavaScript实现随机替换图片的方法,涉及javascript中Math.random方法的灵活运用,需要的朋友可以参考下
2015-04-04
基于JSONP原理解析(推荐)
下面小编就为大家推荐一篇基于JSONP原理解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
TypeScript遍历Array的方法(for,forEach,every)
本文主要介绍了TypeScript遍历Array的方法(for,forEach,every)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
javascript中Array数组的迭代方法实例分析
这篇文章主要介绍了javascript中Array数组的迭代方法,实例分析了Array数组的迭代方法定义与使用技巧,需要的朋友可以参考下
2015-02-02