JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

在网页制作中，为了减少页面的加载时间和提高用户体验，很多时候需要将彩色图片转换为黑白图片。这里提供使用JavaScript+Canvas实现彩色图片转换为黑白图片的方法：

1. 获取图片

首先需要获取图片文件，可以通过以下方法：

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  // 图片加载完成后进行处理
};

2. 绘制画布

绘制画布的目的是为了将图片绘制到画布上，方便进行处理。可以通过以下方法创建画布：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

3. 将图片转换为黑白图片

将彩色图片转换为黑白图片的方法有很多，比如将RGB三个通道的值加权平均，或者将红色通道的值作为灰度值等。这里提供一个简单的方法，直接将RGB三个通道的值取平均值：

var imgData = ctx.getImageData(0, 0, img.width, img.height);
var data = imgData.data;

for (var i = 0; i < data.length; i += 4) {
  var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = avg;
  data[i + 1] = avg;
  data[i + 2] = avg;
}

ctx.putImageData(imgData, 0, 0);

4. 输出图片

将处理完成的黑白图片输出到网页中：

var grayImg = new Image();
grayImg.src = canvas.toDataURL('image/png');
document.body.appendChild(grayImg);

示例1：基本用法

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  var imgData = ctx.getImageData(0, 0, img.width, img.height);
  var data = imgData.data;

  for (var i = 0; i < data.length; i += 4) {
    var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;
    data[i + 1] = avg;
    data[i + 2] = avg;
  }

  ctx.putImageData(imgData, 0, 0);

  var grayImg = new Image();
  grayImg.src = canvas.toDataURL('image/png');
  document.body.appendChild(grayImg);
};

示例2：封装成函数

function grayscale(src, callback) {
  var img = new Image();
  img.src = src;
  img.onload = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    var imgData = ctx.getImageData(0, 0, img.width, img.height);
    var data = imgData.data;

    for (var i = 0; i < data.length; i += 4) {
      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg;
      data[i + 1] = avg;
      data[i + 2] = avg;
    }

    ctx.putImageData(imgData, 0, 0);

    var grayImg = new Image();
    grayImg.src = canvas.toDataURL('image/png');
    callback(grayImg);
  };
}

grayscale('image.jpg', function(img) {
  document.body.appendChild(img);
});