图像像素魔术：玩转画布，改变图片颜色

前端

2023-11-06 16:13:15

探索 Canvas 的像素世界：释放图像处理的无限可能

在像素的世界中遨游

想象一下一张五颜六色的图像，它是由数百万个微小的积木构成的，这些积木称为像素。每个像素都携带一个颜色值，这些颜色值组合在一起，创造出我们眼中令人惊叹的视觉盛宴。

在数字图像的领域中，像素就是一切。而 Canvas，这个奇妙的 HTML5 元素，则赋予我们操控这些像素的超能力。借助 Canvas，我们可以深入图像的内部世界，尽情探索图像处理的无限可能。

踏上 Canvas 之旅

用 Canvas 改变图像颜色并非难事，但需要遵循几个基本步骤。首先，我们创建一个 Canvas 元素，然后将图片加载到其中。当图片就位后，我们就可以使用 Canvas 提供的强大 API 访问和操作图像像素了。

1. 构建 Canvas 画布

<canvas id="myCanvas" width="500px" height="300px"></canvas>

这段代码创建了一个 Canvas 元素，并指定了它的宽度和高度。

2. 将图片带入 Canvas

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = "image.jpg";

这段代码将图片加载到 Canvas 中。它首先获取 Canvas 元素及其 2D 渲染上下文。然后，它创建一个 Image 对象，并监听它的 onload 事件。当图片加载完成后，它使用 drawImage 方法将图片绘制到 Canvas 上。

3. 挥洒像素色彩

图片已经乖乖地躺在 Canvas 中，现在我们可以施展魔法，改变它的像素颜色了。

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  data[i] = 255; // 红色
  data[i + 1] = 0; // 绿色
  data[i + 2] = 0; // 蓝色
  data[i + 3] = 255; // 透明度
}
ctx.putImageData(imageData, 0, 0);