How to replace specific color range from a image?

Question

Is there any method to replace/remove colors by color range in Javascript, Opencv or anything else that can be operated on website?

As the above image. Is that possible to replace all the white color(It can be white or near white colors) with transparent color? Any suggestion would be appreciated.

Answer 1

With imagemagick this can be done quickly.

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

The value of -fuzz 6% can be adjusted to match "near white" thresholds.

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

Answer 2

You could create a canvas and draw that image onto it, that way you're able to get pixel colors and manipulate them. (And also save the result)

This might lead you somewhere to start with. If you require further help, just comment.

---

EDIT: Little sample of what this should work like:

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

You can apparently not just load an image from some other website and modifiy it in the canvas, unless you set img.crossOrigin = "Anonymous" and the other website allows it. I got no clue on what exactly happens there, I just know that it works with imgur.com. (That's why everything's in the onload function now)

The loadedBefore stuff is because StackOverflow apparently calls the img.onload function pretty often, you won't have this issue if you use your own image so you don't need the crossOrigin and onload stuff.....

Just a function to do the stuff:

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();
}