使用 Canvas 放大图片

Huy大约 2 分钟

Canvas 除了绘制图片外，还可以对图片进行放大操作。

其放大的原理是:

获取原始图像数据：首先，要将原始图片加载到 Canvas 上，需要获取原始图片的像素数据。这些数据包含了图片中每个像素的颜色信息。
计算放大后的尺寸：在放大图片时，需要计算放大后的宽度和高度。放大倍数可以通过用户输入或程序预设来确定。例如，放大两倍就意味着新的图片尺寸是原始尺寸的两倍。
进行插值计算：放大图片时，需要对每个新像素进行插值计算以确定其颜色。插值是一种技术，用于根据已知数据点的值，在两点之间估计出新点的值。最后绘制放大后的图像：经过插值计算得到新的像素数据后，就可以将这些数据绘制到 Canvas 上，形成放大后的图像。

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas 图片放大示例</title>
  </head>
  <body>
    <h2>原始图片</h2>
    <img
      src="https://via.placeholder.com/400"
      alt="原始图片"
      id="originalImage"
    />

    <h2>放大后的图片</h2>
    <canvas id="zoomedCanvas" width="800" height="600"></canvas>

    <script>
      window.onload = function () {
        // 获取原始图片和 Canvas 元素
        const originalImage = document.getElementById('originalImage')
        const canvas = document.getElementById('zoomedCanvas')
        const ctx = canvas.getContext('2d')

        // 加载原始图片到 Canvas 上
        const img = new Image()
        img.onload = function () {
          // 绘制原始图片到 Canvas 上
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

          // 设置放大倍数
          const scaleFactor = 2 // 放大两倍

          // 计算放大后的宽高
          const scaledWidth = img.width * scaleFactor
          const scaledHeight = img.height * scaleFactor

          // 在 Canvas 上放大图片
          ctx.drawImage(
            img,
            0,
            0,
            img.width,
            img.height,
            0,
            0,
            scaledWidth,
            scaledHeight
          )
        }

        // 设置原始图片的 URL
        img.src = originalImage.src
      }
    </script>
  </body>
</html>

再来看看其中关键的 drawImage APIopen in new window 有多种用法:

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

image：要绘制的图像，可以是 <img> 元素、<video> 元素、另一个 Canvas 对象等。
sx、sy、sWidth、sHeight：源图像(s 是 source 的缩写)的起始位置和宽高，用于指定要绘制的图像区域。
dx、dy、dWidth、dHeight：目标图像(d 是 destination 的缩写)的起始位置和宽高，用于指定绘制图像的目标位置和大小。

其它用法

从以上案例中, 还可以得知的是, 除了普通图片可以用 Canvas 进行放大。对于画布上已经绘制的 Canvas 内容，也可以进行放大，只需要重新再创建一个新的 Canvas 对象，然后将需要放大的内容绘制到新的 Canvas 对象上即可。

使用 Canvas 放大图片

# 代码实现

# 其它用法

代码实现

其它用法