JS 图像在画布上 - Javascript

在Web开发中，图像处理是一个非常重要的部分，如何在Javascript中的HTML5 canvas画布上处理图像是许多开发者们都探索过的方向，本文将介绍一些在画布上使用Javascript实现图片处理的关键技术。

知识点概览

本文将涉及到下面几个知识点：

• 读取图像并加载到 canvas 中
• 在画布上绘制图像
• 在画布上操作以及更改图像色值
• 将 canvas 中的图像转为图片来保存

读取图像并加载到 canvas 中

要在 canvas 上对图像进行操作，首先得需要将图像加载到 canvas 中。在Javascript中，可以使用 Image 对象来加载和处理图像。

const img = new Image();
img.onload = function() {
  // 在 onload 回调函数中绘制图片到 canvas 上
  ctx.drawImage(img, 0, 0);
};
img.src = 'path/to/image';

在这段代码中，我们创建了一个 Image 对象，然后在它的 onload 回调函数中使用 canvas 的 drawImage() 方法将图片绘制到 canvas 上。此时，我们已经成功将图片加载到了 canvas 中。

在画布上绘制图像

为了在 canvas 上显示出图像，还需要用到 canvas API 的 drawImage() 方法。使用该方法，你可以在 canvas 上绘制 Image 对象，使用以下代码：

ctx.drawImage(image, x, y);

其中，image 就是已加载的 Image 对象，x 和 y 则是图像在 canvas 上的左上角坐标。如果要改变图像的尺寸或者旋转，可以使用下面这个方法：

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

这个方法能够控制图像的源位置和尺寸，以及目标位置和尺寸，分别用 sx、sy、 sWidth、sHeight、dx、dy、dWidth、dHeight 来表示。

在画布上操作以及更改图像色值

一旦图像已经加载到了 canvas 上，我们就可以开始对它进行操作了。如果你想要更改图像的颜色或者任何其他内容，可以直接访问 canvas 上的像素数据。可以使用如下方法：

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

该方法返回一个 ImageData 对象，其中包含了整个 canvas 的像素数据信息。这个对象的 data 属性就是一个含有所有像素信息的 Uint8ClampedArray 数组，其中每个元素代表了一个像素的 RGBA 值。

一旦拿到像素数据，就可以按照需要改变其颜色、亮度、对比度等属性。例如，下面这段代码就将可以替换掉每个像素的红色通道：

for (let i = 0; i < imgData.data.length; i+=4) {
  imgData.data[i+0] = 255;
}

在这段代码中，我们遍历了所有图片数据，并将红色通道的值设为了 255。这样就能够轻易地进行颜色调整和目标处理。

将 canvas 中的图像转为图片来保存

最后将处理过的图像转化成图片是本示例的核心部分。

首先，我们需要使用 canvas 的 toDataURL() 方法将 canvas 中的图像转为数据 URL：

const imgDataUrl = canvas.toDataURL();

这段代码会返回一个 Base64 编码的字符串，其中包含了当前 canvas 上的图像信息。

完成了图像的转换之后，我们就可以将它保存到本地文件系统或是上传到服务器上，具体实现方式就看需求了。在此不再详述。

结束语

至此，本文已经介绍完了 Javascript 中的图像在画布上处理的一些关键技术。这些操作看起来可能比较复杂，但只要掌握了核心概念之后，就能轻松地完成对图像进行各种处理，创造出优美的画面。

希望本文对大家有所帮助，谢谢您的阅读。