холст ImageData удалить белые пиксели

Question

У меня есть несколько изображений в формате HTML, которые имеют белый фон.Мне нужно убрать белый фон.Я думал, что смогу сделать все белые пиксели прозрачными, но я не знаю, как это сделать.Я хотел бы использовать только html / javascript.

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.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');
}

и для его использования установите src изображения на возвращаемое значение этого метода.

var someimage = document.getElementById('imageid');
someimage.src = white2transparent(someimage);

http://jsfiddle.net/gaby/UuCys/

---

Чтобы этот код работал, изображение должно приходить из того же домена, что и код ( по соображениям безопасности ).

Answer 2

Вместо использования JPG, используйте PNG с прозрачным фоном вокруг изображения. Вы получите лучший результат.

Answer 3

Но если вы хотите просто очистить imageData перед рисованием, есть более короткое решение:)

function clearData( imageData  )
{
    var d = imageData.data;
    var L = d.length;
    for ( var i = 3; i < L; i += 4 )
    {
        d[i] = 0;
    }
}

Answer 4

Ну, данные изображения, которые вы получаете от объекта canvas с помощью getImageData, являются просто информацией о пикселях RGBA, то есть красной, зеленой, синей и альфа-прозрачностью.Таким образом, вы можете получить данные изображения и просто выполнить итерацию, просматривая четыре пикселя за раз.Когда вы видите белый, вы можете просто обнулить его (вместе с альфа-значением).

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

В действительности очистить края довольно сложно, в зависимости откакие именно исходные изображения у вас есть.Я не думаю, что это передовая обработка изображений или что-то еще, но это не тривиально.