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

Question

在Javascript、Opencv或其他任何可以在网站上操作的颜色范围内，有什么方法可以replace/remove颜色？

如上图。有没有办法把所有的白色(可以是白色或者接近白色)全部换成透明色？如有任何建议，我们将不胜感激。

Answer 1

您可以创建一个 canvas 并将该图像绘制到它上面，这样您就可以获取像素颜色并对其进行操作。（并保存结果）

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"/>

你显然不能只从其他网站加载图像并在 canvas 中修改它，除非你设置 img.crossOrigin = "Anonymous" 并且其他网站允许它。我不知道那里到底发生了什么，我只知道它适用于 imgur.com。（这就是现在所有内容都在 onload 函数中的原因）

loadedBefore 的东西是因为 Whosebug 显然经常调用 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();
}

Answer 2

使用 imagemagick 这可以很快完成。

 convert input.jpg -fuzz 6% -transparent white  output.png

可以调整 -fuzz 6% 的值以匹配 "near white" 阈值。

Note: The format of JPEG has changed to PNG; which, supports transparency.

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

How to replace specific color range from a image?

javascript

opencv

imagemagick

html5-canvas