致敬Canvas，画出你的黑白和反转世界

2024-01-18 08:43:37

前言

在前端开发的广袤世界中，Canvas可谓是图像处理的利器。它以其强大的图形处理能力，为我们带来了无限的可能。今天，我们将踏上Canvas图像处理之旅，探究如何利用它来创建黑白图片和实现图像的反转效果。

黑白世界

黑白，一种经典而永恒的视觉效果，总能带给我们强烈的艺术冲击力。而Canvas正是打造黑白世界的绝佳工具。

代码一览

// 获取Canvas对象
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 加载图像
const image = new Image();
image.onload = () => {
  // 绘制图像
  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 gray = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;

    // 设置新的像素值
    imageData.data[i] = gray;
    imageData.data[i + 1] = gray;
    imageData.data[i + 2] = gray;
  }

  // 将修改后的图像数据放回Canvas
  ctx.putImageData(imageData, 0, 0);
};
image.src = 'image.jpg';

剖析代码

首先，获取Canvas对象及其绘图上下文。
然后，加载图像并将其绘制到Canvas上。
接下来的重点在于将图像转换为黑白。我们使用getImageData()方法获取图像的数据，然后遍历每个像素，计算其灰度值并将其作为新像素值。
最后，将修改后的图像数据放回Canvas，即可看到黑白效果的呈现。

反转乾坤

反转，一种截然相反的视觉体验，让我们从另一个视角审视世界。Canvas同样能轻松实现这一效果。

代码一览

// 获取Canvas对象
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 加载图像
const image = new Image();
image.onload = () => {
  // 绘制图像
  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) {
    // 反转像素值
    imageData.data[i] = 255 - imageData.data[i];
    imageData.data[i + 1] = 255 - imageData.data[i + 1];
    imageData.data[i + 2] = 255 - imageData.data[i + 2];
  }

  // 将修改后的图像数据放回Canvas
  ctx.putImageData(imageData, 0, 0);
};
image.src = 'image.jpg';