JavaScript/图像

简介

图像主要可以通过两种方式在浏览器的 DOM（文档对象模型）中使用

在img标签中
在canvas标签中

图像标签

用于您可能想要img缩放大小的图像，

更改图像在页面上的对齐方式（左、右、居中），
提取加载图像的图像大小（宽度和高度）并在文本中显示大小
使用 Javascript。
...

画布标签

[编辑 | 编辑源代码]

像素级别修改加载图像的选项（例如，将画布上的红色像素替换为蓝色像素），

标记图像上的特定区域并使用
文本对图像进行注释（例如，在图像上添加建筑物的名称），
- 几何对象（例如，用圆圈标记一个人或在图像中添加箭头，...
- 使用画布将两个源图像合并为一个图像。
- 工作流程

[编辑 | 编辑源代码]

(S1) 分配： 要在 Javascript 中使用图像/画布，需要在 Javascript 中创建一个变量来使用图像/画布。

(S2) 处理： 在 Javascript 中选择可用的方法来处理图像
或img(S3) 加载/保存（本地）： 如果图像在画布上修改，则必须提供并转换结果，以便结果可以提交到服务器或存储在客户端本地以供进一步使用canvas标签中
对于上面提到的工作流程，我们将使用图像处理工作流程作为示例。

使用 Javacript 获取有关图像的信息。

将一个图像加载到画布中，并在图像上添加文本或几何元素（如线条、圆形和框）的注释，然后再次导出修改后的图像。
加载两个图像并将它们合并到一个画布中。
作为示例图像，我们将使用

旧金山金门大桥的创意共享图像和

柏林勃兰登堡门的创意共享图像。
分配

[编辑 | 编辑源代码]

document.getElementById(pID)调用并使用相应的标识符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 在同一个目录中。将图像添加到 HTML 页面

[编辑 | 编辑源代码]

标签添加到 HTML 中。img要提到的一个重要方面是，所有图像在 HTML 页面 DOM 中都有唯一的 ID。因此，如果您在一个页面中有多个图像，则必须为每个图像分配一个新的标识符。

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

为了使 Javascript 代码更易读和易于维护，您可能希望为图像分配有意义的标识符。例如，我们将第二个图像的标识符更改为有意义的名称。

 <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">

img...可以用于标识符imgBrandenburgGate表示 ID 指的是图像而不是画布。现在我们还将一个画布添加到 HTML 代码中。画布具有特定的宽度和大小。由于画布是空的，我们必须使用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>

[编辑 | 编辑源代码]

HTML 页面 DOM 中的对象分配给变量imgvar4image特别是在更复杂的代码中，您可能希望在 Javascript 代码中使用有意义的变量名，类似于 DOM 中的标识符。我们为第二个图像和画布使用有意义的名称。.

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

图像分配错误处理

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

[编辑 | 编辑源代码]

null. 您可以使用getImage4Id(pID)函数来处理这种情况。定义函数后，您可以用

 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()");
   }

getImage4Id(...)替换document.getElementById(...)您可能希望在多个 HTML 项目中使用.

 var var4image = getImage4Id("myImage");

函数，因此我们假设将我们要在 Javascript 文件您可能希望在多个 HTML 项目中使用imagehandlers.js中重用的所有函数都聚合到子目录“js/”中。处理.

[编辑 | 编辑源代码]

LearnJavacript/的文件夹，其中包含子目录img/css/, 中。处理heightjs/.

子目录css/包含我们在图像处理示例中使用的所有图像，
子目录中。处理包含我们在图像处理示例中（例如，在多个示例中）使用的 Javascript 代码，
子目录js/包含定义画布或使用 Javascript 更改的图像布局的样式表文件，具体取决于学习任务。

图像和画布标签

为了缩短代码长度，我们重命名并缩短了来自维基共享资源的两个示例图像（关于金门大桥和勃兰登堡门）的图像名称。因此，将这两个示例移到css/文件夹的子目录的文件夹，其中包含子目录文件夹中，并将它们分别命名为

ggbridge.jpg（用于金门大桥）和
bbgate.jpg（用于勃兰登堡门）。

因此，我们修改了上面提到的用于图像定义的代码片段，如下所示

 <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 函数

正如您可能从图像尺寸中推断出的那样，我们接下来希望在画布“canvImageAnnotation”上将这两个图像并排组合在一起，并在金门大桥下方留出 13 像素高的空白区域。画布“canvas1”的宽度为 640 像素，高度被选为两个源图像高度中的最大值。

  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);
 };

执行图像合并的按钮

现在，我们将函数“mergeImage()”分配给按钮的 onclick 事件。

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

加载/保存

在下一步中，应该将本地文件系统中的图像加载到浏览器中（而不是在远程服务器上 - 请参阅 AppLSAC）。以下步骤将被包含并应用于 HTML 画布，因为用户应该能够使用红色圆圈等对图像进行注释，以标记或突出显示图像上的特定区域

创建一个名为 imagehandler.html 的 HTML 页面，包含头部和主体。
在 js 子文件夹中创建一个名为 js/imageloadsave.js 的 Javascript 文件，其中包含使用的 Javascript 库。
在 HTML 页面 imagehandler.html 中添加一个 文件 按钮，用于创建文件对话框，让用户从本地硬盘选择并加载图像。
为文件按钮分配一个事件处理程序，用于检查加载的文件是否为图像。
将画布大小调整为窗口宽度的 90%，并根据图像的纵横比计算画布的高度。
修改图像并在加载的图像上绘制一个红色圆圈。
将图像保存为 PNG、JPG、SVG 到下载文件夹（参见 AppLSAC/Save）。