JS实现彩色图片转换为黑白图片

在JavaScript中，可以使用Canvas API将彩色图片转换为黑白图片。以下是实现这一功能的示例代码：

function convertToGrayscale(imgEl) {
  // 创建Canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
 
  // 设置Canvas尺寸与图片相同
  canvas.width = imgEl.width;
  canvas.height = imgEl.height;
 
  // 绘制图片到Canvas上下文中
  ctx.drawImage(imgEl, 0, 0);
 
  // 获取图片像素数据
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var pixels = imageData.data;
 
  // 转换为灰度图片
  for (var i = 0; i < pixels.length; i += 4) {
    var avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
    pixels[i] = avg;   // Red channel
    pixels[i + 1] = avg; // Green channel
    pixels[i + 2] = avg; // Blue channel
  }
 
  // 将转换后的像素放回Canvas
  ctx.putImageData(imageData, 0, 0);
 
  // 返回Canvas作为黑白图片的URL
  return canvas.toDataURL();
}
 
// 使用方法：
// 假设你的图片元素有一个id为'colored-image'
var coloredImage = document.getElementById('colored-image');
var grayscaleImageURL = convertToGrayscale(coloredImage);
 
// 可以将转换后的图片设置为img元素的src，或者进行其他操作
// document.getElementById('grayscale-image').src = grayscaleImageURL;

在这段代码中，首先创建了一个Canvas元素并获取其2D上下文。然后，将彩色图片绘制到Canvas上，获取像素数据，通过计算每个像素的RGB平均值来转换颜色为灰度，并最终将转换后的Canvas输出为黑白图片的数据URL。这个数据URL可以用作图片的源，或者进行其他需要的操作。