HTML Canvas - 添加图像

Canvas 元素的最佳功能是它可以接受图像并使用它们。Canvas 元素接受所有外部图像文件以在网页上显示，我们可以使用同一网页上可用的其他 Canvas 元素生成的图像。将图像导入画布需要两个步骤

  • 使用任何可用选项检索图像。

  • 使用drawImage() 函数将图像绘制到canvas 元素上。

检索图像

Canvas API 可以使用以下任何数据类型作为图像源。

  • HTMLImageElement - 这些图像是使用 Image() 构造函数或 HTML 的 <img> 标签创建的。

  • SVGImageElement - 图像通常使用 <image> 元素嵌入。

  • HTMLVideoElement - 它使用 HTML <video> 元素作为图像源并抓取当前视频帧并将其用作所需的图像。

  • HTMLCanvasElement - 我们可以使用与图像源在同一网页上可用的另一个 Canvas 元素。要将图像检索到 Canvas 元素上并使用它们，有六种可能的方法，下面将介绍每种方法。

来自同一页面的图像

我们可以使用 DOM 模型获取页面上所有可用的图像。要查找所有可用图像，必须访问document.images集合。要使用可用图像之一，如果我们知道该特定图像的 ID，则可以使用document.getElementsByTagName()方法或document.getElementById()方法。

来自其他域的图像

要检索其他域中可用的图像，我们将使用标签并使用drawImage()函数将图像调用到 Canvas 元素。确保图像可传输，否则画布可能会被污染。

使用其他 Canvas 元素的图像

当我们使用document.getElementsByTagName()或document.getElementById()方法检索同一页面上可用的图像时，我们也可以使用相同的方法从其他 Canvas 元素检索图像。为了实现这一点，我们必须确保源画布在被目标画布使用之前已经被绘制。

使用 URL 嵌入图像

要将图像添加到画布中，我们可以直接将图像 URL 添加到代码中并访问它。使用 URL 的主要优点是可以比其他方法更快地访问图像，因为它不必再次访问服务器并使其可移植到其他位置。如果图像不能通过 URL 完美访问，则可能无法在画布上显示。下面给出了使用 URL 访问图像的简单代码片段

// Creating an image element
var image = new Image();
// Accessing the image using URL
image.src = 'https://www.tutorialspoint.com/scripts/img/logo-footer.png';

从视频生成帧

我们可以使用 <video> 元素从视频中获取图像帧。例如，如果我们有一个 id 为smallvideo 的视频元素，我们可以从中获取帧并将其用作图像。下面给出了一个小代码片段来演示图像检索

// function to get image frame
function frameFromVideo() {
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   return document.getElementById('smallvideo');
}

从头开始构建形象

我们可以使用image()构造函数来创建图像并使用其路径访问它。将图像路径提供给构造函数后，图像开始加载。下面给出了一段小代码，展示了如何使用源路径从头开始构建图像。

// Create new img element
var image = new Image();
// to avoid exceptions
image.addEventListener('load', function() {
   // add draw image code statements here
}, false);
// give image source path
image.src = 'imageaddress.png';

绘制图像

HTML5 Canvas 元素配备了在画布上绘制图像的默认方法。下面给出方法

序列号 方法及说明
1

绘制图像()

此方法将图像绘制到画布元素上。该方法采用三种类型的输入参数并相应地给出。
2

绘制图像（图像，x，y）

该方法将图像作为第一个参数，并将其绘制在Canvas上的点(x,y)处。
3

绘制图像（图像，x，y，宽度，高度）

此方法以给定的宽度和高度在画布上的点 (x, y) 处绘制作为参数给出的图像。该方法一般用于图像的缩放。
4

绘制图像（图像，sx，sy，sw，sh，dx，dy，dw，dh）

此方法包含源点和目标点，以及源和目标的宽度和高度。该方法用于对图像进行切片。

例子

以下示例代码实现了如何将图像绘制到 Canvas 元素中。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="450" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 50, 50);
            };
            image.src = 'https://www.tutorialspoint.com/html5/images/logo.png';
         }
      </script>
   </body>
</html>

输出

该代码将图像渲染到画布上，如下所示

绘制图像

缩放和切片

当需要包含画布空间以便可以在 Canvas 元素内构造其他形状或图形时，图像缩放非常有用。缩放可能会导致图像模糊，因此应正确给出参数。帮助我们对Canvas图像进行缩放的方法是

drawImage( image, x, y, width, height);

缩放示例

以下示例演示了如何通过改变宽度和高度参数对同一图像执行缩放。下面给出实现代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 50, 50, 100, 75);
               context.drawImage(image, 200, 50, 50, 50);
               context.drawImage(image, 300, 50, 250, 75);
               context.drawImage(image, 50, 150, 400, 250);
            };
            image.src = 'https://www.tutorialspoint.com/html5/images/logo.png';
         }
      </script>
   </body>
</html>

输出

上述代码的输出是

缩放示例

切片可以帮助我们获取图像的一部分并将其粘贴到 Canvas 元素上。image 参数后面的前四个参数表示要切片的图像的大小，其他参数表示应将其粘贴到具有指定宽度和高度的 Canvas 中的位置。实现切片的方法是

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

切片示例

以下示例显示了如何对图像进行切片。下面给出实现代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Images</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="image();">
      <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
      <script>
         function image() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.onload = function() {
               context.drawImage(image, 10, 10, 50, 50, 20, 20, 100, 100);
               context.drawImage(image, 40, 40, 50, 50, 150, 20, 100, 100);
            };
            image.src = 'https://www.tutorialspoint.com/html5/images/logo.png';
         }
      </script>
   </body>
</html>

输出

以下代码的输出是

切片示例