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

一、HTML5 Canvas概述

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

Canvas的基本用法：创建Canvas元素：通过HTML中定义标签。获取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，我们能够灵活地为图片添加水印，本文展示的代码为基础的水印添加方案，大家可以根据实际需求进一步扩展功能，如支持动态字体、透明度控制、多个水印等。