JavaScript实现彩色图片变黑白

以下是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值修改为灰度值,从而实现黑白化。

你可能感兴趣的:(javascript,前端,html)