如何替换图像中的特定颜色范围？

Question

在Javascript，Opencv或网站上可以使用的其他颜色范围中，是否有任何方法可以替换/删除颜色？

如上图所示。是否可以用透明色替换所有白色（可以是白色或接近白色）？任何建议将不胜感激。

Answer 1

使用imagemagick可以快速完成。

df.loc[:first_index, 'col_B'] = False
df.loc[first_index:, 'col_B'] = True

可以调整 convert input.jpg -fuzz 6% -transparent white output.png 的值以匹配“接近白色”的阈值。

  

注意：JPEG格式已更改为PNG；支持透明性。

Answer 2

您可以创建一个画布并在其上绘制图像，这样便可以获取像素颜色并对其进行操作。 （并保存结果）

This可能会带您从某个地方入手。如果您需要进一步的帮助，请发表评论。

---

编辑：应该如何工作的小样本：

//Sets up canvas containing the image:
var img = document.getElementById("image");
img.crossOrigin = "Anonymous";
img.src = "https://i.imgur.com/X1fKQsK.jpg";

loadedBefore = false;
img.onload = function(){
  if(loadedBefore) return;
  else loadedBefore = true;
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img,0,0,img.width,img.height);
  //Finds pixels matching color black:
  for(x=0; x<canvas.width; x++){
    for(y=0; y<canvas.height; y++){
      imgdata = ctx.getImageData(x,y,1,1);
      color = imgdata.data; //Gets color of coordinate (with 1 pixel in size)
      if(color[0] > 250 && color[1] > 250 && color[2] > 250){ //Checks if color is pretty white
        color[3] = 0; //Sets alpha to 0 -> Makes color transparent
        ctx.putImageData(imgdata,x,y);
      }
    }
  }

  img.src = canvas.toDataURL(); //Set image to display canvas content / update image
  console.log("done!");
}

<img id="image"/>

除非您设置img.crossOrigin = "Anonymous"并且其他网站允许，否则您显然不能只从其他网站加载图像并在画布中对其进行修改。我不知道那里到底发生了什么，我只知道它可以与imgur.com一起使用。 （这就是为什么现在所有内容都在onload函数中的原因）

loadedBefore的东西是因为StackOverflow显然经常调用img.onload函数，如果您使用自己的映像，则不会出现此问题，因此不需要crossOrigin和onload的东西.....

只是一个函数来做这些事情：

function whiteToTransparent(img){
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img,0,0,img.width,img.height);
  //Finds pixels matching color black:
  for(x=0; x<canvas.width; x++){
    for(y=0; y<canvas.height; y++){
      imgdata = ctx.getImageData(x,y,1,1);
      color = imgdata.data;
      if(color[0] > 250 && color[1] > 250 && color[2] > 250){
        color[3] = 0;
        ctx.putImageData(imgdata,x,y);
      }
    }
  }
  img.src = canvas.toDataURL();
}