JS实现彩色图片转换为黑白图片的3种方法

<div style="display: flex">
  <img src="./panda.jpeg" />
  <button onclick="change()">转换</button>
  <canvas width="358" height="362"></canvas>
</div>

<script>
  function change() {
    const img = document.querySelector("img");
    const cvs = document.querySelector("canvas");
    // 获取绘图表面提供 2D 渲染上下文
    const ctx = cvs.getContext("2d");
    // 把img元素画到canvas画布上
    ctx.drawImage(img, 0, 0);

    // 获取画布某个区域的图像信息（整个图片区域）
    const imageData = ctx.getImageData(0, 0, img.width, img.height);
    // imageData：图片信息对象
    for (let i = 0; i < imageData.data.length; i += 4) {
      // 将灰度值重新赋值给rgba
      const r = imageData.data[i];
      const g = imageData.data[i + 1];
      const b = imageData.data[i + 2];
      const avg = (r + g + b) / 3;
      imageData.data[i] =
      imageData.data[i + 1] =
      imageData.data[i + 2] =
      avg;
    }
    // 重新设置图像数据到画布
    ctx.putImageData(imageData, 0, 0);
  }
  </script>

<div>
  <img src="./panda.jpeg" />
  <button onclick="change()">点击</button>
</div>
<script>
  const change = () => {
    const img = document.querySelector('img');
    img.style.filter = 'grayscale(100%)'
  }
</script>