canvas ImageData xóa các pixel màu trắng

Question

Tôi có một số hình ảnh trong html có nền trắng. Tôi cần phải loại bỏ nền trắng. Tôi đã nghĩ rằng tôi có thể làm cho tất cả các điểm ảnh trắng trong suốt, nhưng tôi không biết làm thế nào để làm điều đó. Tôi chỉ muốn sử dụng html/javascript.

Answer 1

Sau đây là cách để làm điều đó ..

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

và sử dụng nó thiết lập các src của một hình ảnh để các giá trị trả về của phương pháp này.

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

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

---

Đối với mã này để làm việc, hình ảnh phải được xuất phát từ cùng một tên miền như mã (vì lý do an ninh).

Answer 2

Dữ liệu hình ảnh bạn lấy lại từ đối tượng canvas với "getImageData" chỉ là thông tin pixel RGBA - có nghĩa là, màu đỏ, xanh lục, xanh dương và alpha trong suốt. Vì vậy, bạn có thể nhận được dữ liệu hình ảnh và chỉ cần lặp qua, nhìn vào bốn điểm ảnh tại một thời điểm. Khi bạn nhìn thấy một màu trắng, bạn có thể chỉ cần nó ra (cùng với giá trị alpha).

Hiện tại, bạn sẽ không hài lòng với kết quả vì sẽ vẫn có "hào quang" xung quanh các phần tử không phải màu trắng. Hình ảnh ban đầu là (có thể) hơi mờ, hiệu quả chống răng cưa, ở các cạnh của khu vực màu. Vì vậy, có các điểm ảnh dọc theo các cạnh sáng hơn một chút so với hình ảnh chính và bạn sẽ thấy những ảnh đó vẫn còn sau khi xóa tất cả các màu trắng tinh khiết.

Để thực sự dọn dẹp các cạnh là khá phức tạp, tùy thuộc vào chính xác loại hình ảnh nguồn bạn đã có. Tôi không nghĩ rằng nó xử lý hình ảnh cắt cạnh hoặc bất cứ điều gì, nhưng nó không tầm thường.

Answer 3

Thay vì sử dụng JPG, hãy sử dụng PNG có nền trong suốt xung quanh hình ảnh. Bạn sẽ có kết quả tốt hơn.

Answer 4

Nhưng nếu bạn muốn chỉ rõ imageData trước khi rút ra có một giải pháp ngắn hơn :)

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