用JavaScript画布调整图像

在前端开发中，我们经常需要处理图像。有时候，我们需要将一张图片变得更加平滑或者增强细节，这时候可以使用JavaScript和画布来实现。

什么是画布？

画布（Canvas）是HTML5标准中的一个元素，它允许我们使用JavaScript绘制图形。通过使用画布，我们可以创建动态的图像、游戏、交互式应用等。

如何使用JavaScript画布调整图像？

在下面的例子中，我们将展示如何使用JavaScript画布来平滑一张图片。

第一步：获取图片

首先，我们需要创建一个Image对象来存储要处理的图片。可以通过以下代码获取：

const image = new Image();
image.src = 'example.jpg';

第二步：创建画布

接着，我们需要创建一个画布元素，并获取其上下文（context）。可以通过以下代码来创建：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 将画布插入到DOM中
document.body.appendChild(canvas);

第三步：绘制图片到画布上

在获得画布元素和图片之后，我们可以使用drawImage()方法将图片绘制到画布上。

ctx.drawImage(image, 0, 0);

以上代码将图片绘制到画布起点(0, 0)处。

第四步：调整图像

现在，我们可以使用画布的getImageData()方法获取整个画布的像素数据。

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

接着，我们可以遍历掉每一个像素点，对其颜色进行调整。下面是一个简单的平滑调整示例：

// 遍历每一个像素点
for (let i = 0; i < imageData.data.length; i += 4) {
  // 计算该点周围像素点的平均值
  const red = (imageData.data[i - 4] + imageData.data[i + 4] + imageData.data[i - imageData.width * 4] + imageData.data[i + imageData.width * 4]) / 4;
  const green = (imageData.data[i - 3] + imageData.data[i + 5] + imageData.data[i - imageData.width * 4 + 1] + imageData.data[i + imageData.width * 4 + 1]) / 4;
  const blue = (imageData.data[i - 2] + imageData.data[i + 6] + imageData.data[i - imageData.width * 4 + 2] + imageData.data[i + imageData.width * 4 + 2]) / 4;

  // 更新像素点的颜色
  imageData.data[i] = red;
  imageData.data[i + 1] = green;
  imageData.data[i + 2] = blue;
}

第五步：绘制调整后的图像

最后，我们需要将调整后的像素数据绘制回画布上。

ctx.putImageData(imageData, 0, 0);

完整代码示例

下面是一个完整的JavaScript画布调整图像的示例代码：

const image = new Image();
image.src = 'example.jpg';

image.onload = function () {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置画布大小和图片尺寸一致
  canvas.width = image.width;
  canvas.height = image.height;

  // 将画布插入到DOM中
  document.body.appendChild(canvas);

  // 绘制图片到画布上
  ctx.drawImage(image, 0, 0);

  // 调整图像
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < imageData.data.length; i += 4) {
    const red = (imageData.data[i - 4] + imageData.data[i + 4] + imageData.data[i - imageData.width * 4] +

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14633) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/14633](https://www.javascriptcn.com/post/14633)