首页 > 网络编程 > JavaScript > javascript技巧 > HTML5 Canvas图片添加水印

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

2024-11-06 08:27:54 作者：_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图片添加水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！