以下是JavaScript代码实现彩色图片变黑白图片:
```javascript
// 获取图片对象
var img = document.getElementById("myImage");
// 创建canvas对象
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// 获取canvas上下文对象
var ctx = canvas.getContext("2d");
// 将图片绘制到canvas上
ctx.drawImage(img, 0, 0);
// 获取图片数据
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 遍历像素点,将彩色像素点转换为黑白像素点
for(var i = 0; i < imageData.data.length; i += 4) {
var r = imageData.data[i];
var g = imageData.data[i + 1];
var b = imageData.data[i + 2];
var gray = (r + g + b) / 3;
imageData.data[i] = gray;
imageData.data[i + 1] = gray;
imageData.data[i + 2] = gray;
}
// 将处理后的数据重新绘制到canvas上
ctx.putImageData(imageData, 0, 0);
// 将canvas转换为黑白图片
img.src = canvas.toDataURL();
```
这段代码将彩色图片转换为黑白图片的原理是将每个像素点的RGB值取平均值,得到灰度值,再将RGB值修改为灰度值,从而实现黑白化。