Canvas基础篇：图片操作drawImage详解-CSDN博客

本文链接：https://blog.csdn.net/wuhen_n/article/details/147923105

Canvas基础篇：图片操作详解

前言
drawImage()
结语

前言

在之前的文章中，我们讲述了Canvas中文本操作的方法和属性，本文将讲述Canvas中图片操作方法drawImage()。

drawImage()

drawImage()：用于操作图片，存在三种重载形式，每种形式对应不同的功能和使用场景：

基本形式

基本形式的作用是将完整图像按照原始尺寸绘制到画布指定位置，不改变图像的大小和形状，其语法如下所示：

语法说明

ctx.drawImage(image, dx, dy);

其中：image表示待绘制的图像源，可以是HTMLImageElement、SVGImageElement、HTMLVideoElement 等类型的对象；(dx, dy)表示图像在目标画布上左上角的坐标位置，用于确定图像绘制的起始点。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本形式</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      let image = new Image();
      image.src = 'https://picsum.photos/id/29/400/200'; // 使用示例图片
      image.onload = function() {
        ctx.drawImage(image, 50, 50)
      }
    </script>
  </body>
</html>

效果预览

基本形式

缩放形式

缩放形式的作用是将完整图像按指定的宽高尺寸绘制到画布上，支持对图像进行等比例或非等比例缩放，其语法如下所示：

语法说明

ctx.drawImage(image, dx, dy, dWidth, dHeight);

相比基本形式，缩放形式多了dWidth、dHeight参数，该参数的作用是设置绘制到画布上的图像宽度和高度，通过设置这两个参数，可实现对图像的缩放操作。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放形式</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      let image = new Image();
      image.src = 'https://picsum.photos/id/29/400/200'; // 使用示例图片
      image.onload = function() {
        // 基本形式 原始大小
        ctx.drawImage(image, 50, 50);
        // 缩放形式
        ctx.drawImage(image, 50, 260, 100, 50);
      }
    </script>
  </body>
</html>

效果预览

缩放形式

缩放裁剪形式

缩放裁剪形式的作用是从源图像中裁剪出指定区域，并按照目标宽高尺寸绘制到画布上，实现图像的缩放与裁剪同步操作。

语法说明

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

相比缩放形式，缩放裁剪形式多了sx, sy, sWidth, sHeight参数，(sx, sy)表示源图像中需要绘制区域的左上角坐标，用于指定裁剪的起始位置；(sWidth, sHeight)表示源图像中需要绘制区域的宽度和高度，通过这两个参数确定裁剪的范围。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放裁剪形式</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      let image = new Image();
      image.src = 'https://picsum.photos/id/29/400/200'; // 使用示例图片
      image.onload = function() {
        // 基本形式 原始大小
        ctx.drawImage(image, 50, 50);
        // 缩放形式
        ctx.drawImage(image, 50, 260, 100, 50);
        // 缩放裁剪形式
        ctx.drawImage(image, 
          50, 50, 
          200, 100, 
          200, 260,
          100, 50);
      }
    </script>
  </body>
</html>