本文介绍三种在JavaScript中将彩色图片转换为黑白图片的方法：利用Canvas API手动修改像素数据、使用CSS3的filter属性实现视觉灰度，以及借助Three.js或Pixi.js等第三方库处理。文章包含具体代码示例与原理说明，帮助开发者根据需求选择合适方案。
1. 应用 Canvas 技术
在探索 canvas 特性时，观察到一种将彩色图像高效转换为灰度图像的技巧。以下提供实现该功能的精简代码范例：
<div style="display: flex">
<img src="./panda.jpeg" />
<button onclick="change()">转换</button>
<canvas width="358" height="362"></canvas>
</div>核心流程概括如下：
1. 将 img 元素绘制至 canvas 画布
2. 提取画布指定区域的图像数据，获取图像信息对象
该对象包含 data 类型化数组（涵盖红、绿、蓝、alpha 通道）及图像宽高信息
3. 将处理后的图像数据写回画布
<script>
function change() {
const img = document.querySelector("img");
const cvs = document.querySelector("canvas");
// 获取绘图表面提供 2D 渲染上下文
const ctx = cvs.getContext("2d");
// 把img元素画到canvas画布上
ctx.drawImage(img, 0, 0);
// 获取画布某个区域的图像信息（整个图片区域）
const imageData = ctx.getImageData(0, 0, img.width, img.height);
// imageData：图片信息对象
for (let i = 0; i < imageData.data.length; i += 4) {
// 将灰度值重新赋值给rgba
const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];
const avg = (r + g + b) / 3;
imageData.data[i] =
imageData.data[i + 1] =
imageData.data[i + 2] =
avg;
}
// 重新设置图像数据到画布
ctx.putImageData(imageData, 0, 0);
}
</script>最终呈现效果如下：
注意：需确保 canvas 的 width 和 height 属性与图片原始尺寸一致，否则可能导致转换后图像尺寸偏差。
灰度图像生成原理
1. 画布中的图像由若干像素点构成，每个像素点包含四个通道数据：红、绿、蓝、alpha。
2. 实现灰度化的关键在于，将每个像素点的红、绿、蓝数值取平均值，并赋值给该像素点。
2. 应用 CSS 滤镜
若仅需在页面展示灰度效果，无需通过 JavaScript 处理图像数据，可直接利用 CSS 的 filter 属性。代码示例如下：
<div>
<img src="./panda.jpeg" />
<button onclick="change()">点击</button>
</div>
<script>
const change = () => {
const img = document.querySelector('img');
img.style.filter = 'grayscale(100%)'
}
</script>此方式不修改图片原始数据，仅改变其在网页中的渲染显示。
具体效果如下：
3. 借助第三方库
例如 Three.js 或 Pixi.js，这些库提供了内置的图像数据处理方法，涵盖灰度化功能。如需更精确的控制，建议查阅其官方文档。
至此，关于 JS 实现彩色图片转换为黑白图片的三种方法介绍完毕。如需了解更多 JS 彩色转黑白相关内容，可查阅本站往期文章或继续浏览后续文章，感谢大家的支持！