Удалить белый фон из изображения

Question

Seasons Приветствия.

Я использую код, который я нашел в переполнении стека, чтобы удалить белый фон.

function white2transparent(img) 
{ 
     var c = document.createElement('canvas'); 
     var w = img.width, h = img.height; 

     c.width = w; 
     c.height = h; 

     var ctx = c.getContext('2d'); 

     ctx.width = w; 
     ctx.height = h; 
     ctx.drawImage(img, 0, 0, w, h); 
     var imageData = ctx.getImageData(0,0, w, h); 
     var pixel = imageData.data; 

     var r=0, g=1, b=2,a=3; 
     for (var p = 0; p<pixel.length; p+=4) 
     { 
      if (
       pixel[p+r] == 255 && 
       pixel[p+g] == 255 && 
       pixel[p+b] == 255) // if white then change alpha to 0 
      {pixel[p+a] = 0;} 
     } 

     ctx.putImageData(imageData,0,0); 

     return c.toDataURL('image/png'); 
} 

Это не устранение всех белых, вот результат, который я получаю в своей местной копии.

Есть ли способ удалить весь белый фон с помощью JQuery или C#?

Answer 1

Принимая во внимание предложения, которые я изменил, код и белый плюс аналогичные цвета удалены. Однако он удаляет часть небелого или светло-серого изнутри изображения. Это самое близкое к лучшему решению.

function white2transparent(img) 
    { 
     var c = document.createElement('canvas'); 
     var w = img.width, h = img.height; 

     c.width = w; 
     c.height = h; 

     var ctx = c.getContext('2d'); 

     ctx.width = w; 
     ctx.height = h; 
     ctx.drawImage(img, 0, 0, w, h); 
     var imageData = ctx.getImageData(0,0, w, h); 
     var pixel = imageData.data; 

     var r=0, g=1, b=2,a=3; 
     for (var p = 0; p<pixel.length; p+=4) 
     { 
      if ((pixel[p+r] + pixel[p+g] + pixel[p+b]) > (170*3) - 5) 
      {pixel[p+a] = 0;} 
     } 

     ctx.putImageData(imageData,0,0); 

     return c.toDataURL('image/png'); 
    } 

Результат:

Answer 2

Вам нужно включить что-то вроде слайдера, чтобы вы могли добавить диапазон для всех трех каналов для каждого пикселя [p + _]. Например, если мое значение (для моего случая, в слайдере) равно 253, тогда это должно применяться к значению во всех трех пикселях, чтобы пиксели [255, 255, 255] значение альфа = 0, пиксели [254,254,254] ​​значение альфа = 0 и пиксели [ 253,253,253] Значение альфа = 0. Думаю, у вас есть идея! :)

Answer 3

Проблема в том, что остальные пиксели не совсем белые. Вы должны включить некоторые допуски для незначительного изменения цвета. Если вы хотите очень простой исправить, то вы могли бы заменить ваше условное с

if (
      pixel[p+r] >= 250 && 
      pixel[p+g] >= 250 && 
      pixel[p+b] >= 250) // if close to white, then change alpha to 0 
     {pixel[p+a] = 0;} 

И это даст вам допуск 5 для каждого цветового канала. Тем не менее, это может быть лучше использовать такую ​​строку:

if ((pixel[p+r] + pixel[p+g] + pixel[p+b]) > (255*3) - 5) 
    {pixel[p+a] = 0;} 

Это даст вам допуск 5 в целом, независимо от канала, который вызывает обесцвечивание.

Даже лучшим решением является создание GUI элемент, который устанавливает переменную colorTolerance и использовать формулу:

if ((pixel[p+r] + pixel[p+g] + pixel[p+b]) > (255*3) - colorTolerance) 
    {pixel[p+a] = 0;} 

Это также может удалить некоторые из белых пикселей в середине изображения, так держать это в виду.

Answer 4

Добавление допуска для цветов, близких к белому, будет работать до некоторой степени, но как насчет изображений, имеющих белый цвет в них, что не часть фона? Даже у вашего изображения есть белый цвет, который не является фоном. (горошек и поясная талия)

Мой ответ нет; нет хорошего способа делать то, что вы хотите, только с кодом. Возможно, вы сможете использовать код, который вы должны выполнить для грубого удаления, но каждое изображение должно быть просмотрено человеком. Вам нужно что-то вроде Photoshop.