一图读懂：Canvas中drawImage()方法实现图像裁切技术的参数详解。

图形开发canvashtml5

运行效果

在Canvas中，drawImage()方法是用于在画布上绘制图像的强大工具。它不仅可以将图像直接绘制到画布上，还可以对图像进行缩放、裁剪等操作。
在上图中可以看到绘制出原图的局部图像。裁切的目的是将图像剪切为较小的尺寸，以满足我们只需要使用图像中某一部分的需求。这在摄影中是一种常见的技巧，用于突出照片的某个特定区域。在Canvas中，我们可以通过drawImage()方法中的sx、sy、s Width、s Height、dx、dy、dWidth和dHeight参数来实现图像的裁切绘制。为了更直观地理解这些参数，我们可以参考一个示例图。这张图展示了原图中的一个局部区域，通过对比原图和这个局部区域，我们可以清晰地看到裁切的效果。其中，sx和sy表示在原图中的裁切起始坐标，sWidth和sHeight定义了从裁切起始点开始的矩形区域的大小，而dx和dy则指定了裁切后的图像在Canvas中的起始坐标，dWidth和dHeight则确定了裁切图像在Canvas上的最终显示大小。通过灵活调整这些参数，我们可以精确地控制裁切的区域和绘制的效果。

drawImage()方法有三种主要用法：

  1. 直接绘制图像：

    • drawImage(image, dx, dy)
    • 参数：
      • image：要绘制的图像对象。
      • dx：图像在画布上的x坐标（目标位置）。
      • dy：图像在画布上的y坐标（目标位置）。

  2. 缩放图像：

    • drawImage(image, dx, dy, dw, dh)
    • 参数：
      • dw：绘制图像的宽度。
      • dh：绘制图像的高度。

  3. 裁剪并绘制图像：

    • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
    • 参数：
      • sx：源图像开始裁剪的x坐标。
      • sy：源图像开始裁剪的y坐标。
      • sw：源图像的裁剪宽度。
      • sh：源图像的裁剪高度。
      • dx：画布上绘制图像的x坐标。
      • dy：画布上绘制图像的y坐标。
      • dw：画布上绘制图像的宽度。
      • dh：画布上绘制图像的高度。

示例效果与源代码：

运行效果

下面是使用HTML文件展示drawImage()方法裁剪图像的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas drawImage() 裁剪示例</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
    <script>
        // 获取Canvas元素和上下文
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 创建一个图像对象
        var image = new Image();
        image.src = '/examples/canvas-qa/117/image/image.png'; // 替换为你的图像路径

        // 当图像加载完成后执行绘制操作
        image.onload = function() {
            // 裁剪图像并绘制到画布上
            // 参数说明：裁剪图像从(sx, sy)开始，裁剪区域宽度为sw，高度为sh
            // 然后将裁剪后的图像绘制到画布上的(dx, dy)位置，绘制区域宽度为dw，高度为dh
            ctx.drawImage(image, 50, 50, 200, 200, 50, 50, 300, 200);
        };
    </script>
</body>
</html>

尝试一下 »

在上面的示例中，我们创建了一个Canvas元素，并为其设置了一个id以便在JavaScript中引用。然后，我们创建了一个图像对象，并设置了其源路径。当图像加载完成后，我们使用drawImage()方法的裁剪功能，将图像的(50, 50)位置开始、宽度为200、高度为200的区域裁剪出来，并绘制到画布的(50, 50)位置，同时设置绘制区域的宽度为300、高度为200。

通过这种方式，drawImage()方法不仅实现了图像的绘制，还实现了图像的裁剪功能，为图像处理提供了强大的支持。

上一篇：在Canvas画布上绘制图像时，如果图像没有绘制出来，该如何解决？

下一篇：JavaScript中能够以哪些不同方式显示数据？