js使用canvas把灰度图转化为rgb图

js使用canvas把单通道灰度图转化为rgb图，给一个只有黑白灰三种颜色的图片转化颜色

• 思路：绘制canvas，添加img，绘制图片在canvas上，for循环获取每个（x,y）像素点的颜色，再把每个（x,y）像素点颜色替换掉
• index.html代码

 <canvas id="myCanvas" width="285" height="401"></canvas>

• index.js代码

 var img = new Image();
  img.crossOrigin = "anonymous";
  img.src = "https://......png";
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    img.style.display = "none";
      for (let a = 0; a < canvas.width; a++) {
    for (let b = 0; b < canvas.height; b++) {
      var x = a;
      var y = b;
      var pixel = ctx.getImageData(x, y, 1, 1);
      var data = pixel.data;
      var rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
      if (rgba == "rgba(0, 0, 0, 1)") {
        ctx.fillStyle = 'rgb(16, 78, 139)';
      } else if (rgba == "rgba(255, 255, 255, 1)") {
        ctx.fillStyle = 'rgb(198, 226, 255)';
      } else if (rgba == "rgba(100, 100, 100, 1)") {
        ctx.fillStyle = 'rgb(255, 255, 255)';
      }
      ctx.fillRect(x, y, 1, 1);
    }
  }

  };
}