本文介绍利用 JavaScript 和 Canvas 元素将彩色图片转换为黑白效果的方法。通过获取画布上下文，使用 getImageData 提取像素数据，计算 RGB 平均值并重新赋值，最后通过 putImageData 更新画布，实现图像灰度化处理。
JavaScript Canvas 图片转黑白实现概述
本文通过具体实例，详细解析了如何利用 JavaScript 结合 Canvas 技术实现彩色图片向黑白图片的转换过程，旨在为相关开发者提供参考与借鉴。
核心转换函数 convertToGray() 解析
1、convertToGray()函数
在核心逻辑中，首先通过 canvas 元素的 id 获取画布对象，并将画布的宽高设置为与图片一致的尺寸。接着，将绘图上下文初始化为 2d 模式。待彩色图片加载完毕后，调用 drawImage() 方法将图片绘制到上下文中，随后依次执行 getColorData() 和 putColorData() 函数以完成后续的像素处理与绘制工作。最后，需为 myImage 变量指定正确的彩色图片路径。
像素数据处理 getColorData() 详解
2、getColorData()函数
该函数利用 getImageData() 将图像数据复制到 myImage 对象中，并对图像数据进行如下处理：遍历图像数据数组，依次读取前三个字节（分别代表红色、绿色和蓝色通道，忽略 Alpha 通道）的数值；将这三个字节的值相加后除以 3，计算结果四舍五入取整，并将该整数值重新写入这三个字节中。此计算得到的灰度值范围在 0 到 255 之间，从而生成外观与原始彩色图片对应的黑白图像。
结果输出 putColorData() 说明
3、putColorData()函数
通过 putImageData() 将经过修改的图像数据写回画布。该步骤通常用于封装处理逻辑，确保仅在图像处理完成后才在页面上显示最终结果，避免中间过程闪烁。
var canvas, ctx, myImage;
function convertToGray() {
myImage = document.getElementById("img");
canvas = document.getElementById("myCanvas");
canvas.width = img.width;
canvas.height = img.height;
if (canvas.getContext) {
ctx = canvas.getContext("2d");
myImage.onload = function() {
ctx.drawImage(myImage, 0, 0);
getColorData();
putColorData();
}
myImage.src = "images/img8.jpg";
}
}
function getColorData() {
var length = canvas.width * canvas.height;
myImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < length * 4; i += 4) {
var myRed = myImage.data[i];
var myGreen = myImage.data[i + 1];
var myBlue = myImage.data[i + 2];
myGray = parseInt((myRed + myGreen + myBlue) / 3);
myImage.data[i] = myGray;
myImage.data[i + 1] = myGray;
myImage.data[i + 2] = myGray;
}
}
function putColorData() {
ctx.putImageData(myImage, 0, 0);
}
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述的实现方法能对各位 JavaScript 程序设计人员有所帮助。