介绍

在浏览器的 DOM (文档对象模型) 中，图像主要通过以下两种方式存在：

  1. 在 <img> 标签中
    <img> 标签用于展示图像，支持以下功能：

    • 缩放图像大小
    • 修改图像在页面上的对齐方式（左、右、居中）
    • 提取已加载图像的尺寸（宽度和高度），并在文本中显示尺寸等
      这些都可以通过 JavaScript 实现。

  2. 在 <canvas> 标签中
    <canvas> 标签提供以下功能：

    • 在像素级别修改已加载图像（例如，将画布上的红色像素替换为蓝色像素）
    • 标记图像中的特定区域，并添加注释，例如：
      • 文本（例如，在图像中添加建筑物名称）
      • 几何对象（例如，用圆圈标记某人或在图像中添加箭头）
    • 合并两个源图像为一个图像，并通过 <canvas> 展示。

图像处理工作流

以下是图像处理的主要步骤：

  1. (S1) 分配变量
    为了使用 JavaScript 操作图像或画布，需要通过变量绑定图像或画布。

  2. (S2) 处理
    在 JavaScript 中，使用可用的方法处理 <img> 或 <canvas> 标签中的图像。

  3. (S3) 加载/保存
    如果在 <canvas> 上修改了图像，必须将结果进行转换，以便提交到服务器或存储到客户端以供进一步使用。

示例工作流

以下是图像处理的一些示例：

  • 使用 JavaScript 获取图像的相关信息。
  • 将一张图像加载到 <canvas> 中，添加文本或几何元素（如线条、圆形、矩形）注释，并导出修改后的图像。
  • 将两张图像加载并在 <canvas> 中合并。

示例图像包括：

  • 旧金山的金门大桥（Golden Gate Bridge）
  • 柏林的勃兰登堡门（Brandenburg Gate）

分配变量

为图像分配变量时，建议为图像或画布使用唯一且有意义的标识符（id）。可以使用 document.getElementById(pID) 方法通过标识符访问图像或修改画布。

以下是一个示例：

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg" alt="Golden Gate Bridge">

<script>
  var var4image = document.getElementById("myImage");
</script>

</body>
</html>

在上述示例中，假设您在同一目录中有 index.html 文件和 Golden_Gate_Bridge_as_seen_from_Battery_East.jpg 图像文件。

注意

该示例中，变量 var4image 将保存图像对象的引用。此后，您可以通过 JavaScript 使用该变量来操作图像（例如获取图像宽高或修改其属性）。

将图像添加到 HTML 页面

在 HTML 页面中添加图像

使用 <img> 标签通常可将图像添加到 HTML 页面中。例如：

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">

重要提示：HTML 页面的 DOM 中，每个图像都应有一个唯一的 id。当页面中有多个图像时，需要为每个图像分配不同的标识符，例如：

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
<img id="myImage2" src="Brandenburger_Tor_abends.jpg">

为了提高代码的可读性和可维护性，可以为图像分配有意义的标识符。例如，将第二个图像的标识符更改为：

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
<img id="imgBrandenburgGate" src="Brandenburger_Tor_abends.jpg">

示例：添加 <canvas> 标签

以下示例展示如何在 HTML 中添加一个 canvas 元素。由于 canvas 是空白的，需要通过 width 和 height 属性指定其大小：

<img id="myImage" src="Golden_Gate_Bridge_as_seen_from_Battery_East.jpg">
<img id="imgBrandenburgGate" src="Brandenburger_Tor_abends.jpg">
<canvas id="canvImageAnnotation" width="320" height="213"></canvas>

分配图像变量

以下 JavaScript 代码将 HTML DOM 中的 <img> 元素分配给一个变量：

var var4image = document.getElementById("myImage");

在复杂代码中，可以使用与 DOM 标识符类似的有意义的变量名，例如：

var var4image = document.getElementById("myImage");
var imgGate = document.getElementById("imgBrandenburgGate");
var canvas4annotation = document.getElementById("canvImageAnnotation");

图像分配的错误处理

在处理图像时，可能会遇到 DOM 中不存在特定 id 的图像元素。以下函数 getImage4Id 提供了一种方法来检查图像是否存在：

function getImage4Id(pID) {
  var vImg;
  if (pID) {
    vImg = document.getElementById(pID);
    if (vImg) {
      return vImg;
    } else {
      console.error("Image with identifier '" + pID + "' does not exist in the DOM tree.");
    }
  } else {
    console.error("No identifier 'pID' was provided for function call getImage4Id()");
  }
}

可以用该函数替换 document.getElementById 调用：

var var4image = getImage4Id("myImage");

图像与画布标签

为了简化文件名和代码长度，可以将文件夹和文件名调整如下：

  • 图像目录：img/
  • 文件名：
    • ggbridge.jpg：金门大桥图片
    • bbgate.jpg：勃兰登堡门图片

HTML 代码调整如下：

<img id="imgBridge" src="img/ggbridge.jpg" width="320" height="200">
<img id="imgGate" src="img/bbgate.jpg" width="320" height="213">
<canvas id="canvImageAnnotation" width="640" height="213"></canvas>

合并图像的 JavaScript 函数

以下函数将两个图像合并到一个画布中，并在金门大桥图像下留出 13 像素的空白：

function mergeImage() {
  var canvas1 = document.getElementById("canvImageAnnotation");
  var ctx = canvas1.getContext("2d");
  var image1 = document.getElementById("imgBridge");
  var image2 = document.getElementById("imgGate");
  ctx.drawImage(image1, 0, 0, 320, 200);
  ctx.drawImage(image2, 321, 0, 320, 213);
}

按钮触发合并功能

通过以下按钮将合并功能绑定到 onclick 事件：

<button onclick="mergeImage(); return false">Merge 2 Images</button>

加载/保存图像的步骤

以下是一个通过本地文件系统加载图像并在画布中修改的完整工作流：

  1. 创建 HTML 页面 imagehandler.html
    包含 <header> 和 <body>。

  2. 创建 JavaScript 文件 js/imageloadsave.js
    包含与图像加载、保存相关的功能。

  3. 添加文件选择按钮
    提供文件对话框，供用户从本地硬盘选择和加载图像。

  4. 分配事件处理程序
    检查加载的文件是否为图像。

  5. 调整画布尺寸
    根据窗口宽度设置画布为窗口宽度的 90%，并根据图像的宽高比计算画布高度。

  6. 修改图像
    在加载的图像上绘制一个红色圆圈，用于标记特定区域。

  7. 保存图像
    将修改后的图像保存为 PNG、JPG 或 SVG 格式。

示例保存代码

以下是加载并保存修改后图像的代码骨架：

function loadImage(event) {
  const file = event.target.files[0];
  if (file && file.type.startsWith("image/")) {
    const canvas = document.getElementById("canvImageAnnotation");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.onload = function () {
      canvas.width = img.width * 0.9;
      canvas.height = img.height * 0.9;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
      ctx.fillStyle = "red";
      ctx.fill();
    };
    img.src = URL.createObjectURL(file);
  } else {
    alert("Please select a valid image file.");
  }
}

在 HTML 中添加：

<input type="file" accept="image/*" onchange="loadImage(event)">
<button onclick="saveCanvas()">Save Image</button>
Last modified: Monday, 13 January 2025, 3:12 PM