HTML 画布 - 添加图像

Canvas 元素最好的特性是它可以接受图像并使用它们。Canvas 元素接受所有外部图像文件以在网页上显示，我们可以使用同一网页上其他 Canvas 元素生成的图像。将图像导入 Canvas 是一个两步过程。

使用任何可用的选项检索图像。
使用 drawImage() 函数将图像绘制到画布元素上。

检索图像

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

HTMLImageElement − 这些图像是使用 Image() 构造函数或 HTML 的 <img> 标签创建的。
SVGImageElement − 图像通常使用 <image> 元素嵌入。
HTMLVideoElement − 它使用 HTML <video> 元素作为图像源，获取当前视频帧并将其用作所需的图像。
HTMLCanvasElement − 我们可以使用同一网页上可用的另一个 Canvas 元素作为图像源。要在 Canvas 元素上检索图像并使用它们，共有六种可能的方法，每种方法如下所述。

来自同一页面的图像

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

来自其他域的图像

要检索其他域中可用的图像，我们将使用<img> 标签并将图像使用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://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	drawImage() 此方法将图像绘制到画布元素上。该方法采用三种类型的输入参数，并相应给出。
2	drawImage(image, x, y) 此方法将图像作为第一个参数，并将其绘制在画布上的 (x, y) 点。
3	drawImage(image, x, y, width, height) 此方法将给定的图像作为参数绘制在画布上的 (x, y) 点，并具有给定的宽度和高度。此方法通常用于缩放图像。
4	drawImage(image, 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://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://tutorialspoint.com/html5/images/logo.png';
         }
      </script>
   </body>
</html>

输出

上述代码的输出是：

切片有助于我们获取图像的一部分并将其粘贴到 Canvas 元素上。图像参数后的前四个参数表示要切片的图像大小，其他参数表示应将其粘贴到 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://tutorialspoint.com/html5/images/logo.png';
         }
      </script>
   </body>
</html>

输出

以下代码的输出是：

打印页面