Как заменить определенный цветовой диапазон с изображения?

Question

Есть ли способ заменить / удалить цвета по цветовой гамме в Javascript, Opencv или что-либо еще, что можно использовать на веб-сайте?

Как на изображении выше.Можно ли заменить весь белый цвет ( Это может быть белый или почти белый цвет ) прозрачным цветом?Любое предложение будет оценено.

Answer 1

С помощью imagemagick это можно сделать быстро.

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

Значение -fuzz 6% можно настроить в соответствии с пороговыми значениями "около белого".

Примечание. Формат JPEG изменился на PNG;который поддерживает прозрачность.

Answer 2

Вы можете создать холст и нарисовать на нем это изображение, чтобы получить пиксельные цвета и манипулировать ими.(И также сохраните результат)

Это может привести вас к началу.Если вам нужна дополнительная помощь, просто прокомментируйте.

---

РЕДАКТИРОВАТЬ: Небольшой пример того, как это должно работать, как:

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

Загруженный элемент выше, потому что 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();
}