Chuyển đổi màu ảnh mà không thay đổi nền trong suốt

Question

Có ai có giải pháp tốt để thay đổi màu sắc của một vùng không trong suốt, với sự trợ giúp của HTML5 hoặc Canvas (hay bất kỳ công nghệ HTML5 nào khác).

Tôi googled rất nhiều và tìm thấy một số giải pháp (với Canvas) mà có thể thay đổi màu sắc của một hình ảnh, giống như,

How do i tint an image with HTML5 Canvas?

Canvas - Change colors of an image using HTML5/CSS/JS?

Nhưng những giải pháp cũng thay đổi nền trong suốt đối với màu đã cho (mà tôi không muốn).

Its a stackoverflow png với nền trong suốt. Bây giờ, tôi muốn thay đổi màu sắc hình ảnh mà không ảnh hưởng đến các pixel trong suốt (nền) của nó, để tôi có thể lưu lại hình ảnh với sự trợ giúp của phương pháp canvas toDataURL với màu mới.

Tôi không chắc chắn liệu có thể với HTML5 hay không. Bất kỳ sự trợ giúp nào cũng được đánh giá cao.

Cảm ơn trước.

******************* EDITED *********************

gia tăng hình ảnh mới của viên thuốc (viên nang).

Answer 1

Một Demo (xem ghi chú về bản demo này dưới đây): http://jsfiddle.net/m1erickson/2d7ZN/

Bạn có thể lấy một mảng chứa dữ liệu RGBA pixel của hình ảnh sử dụng context.getImageData

var imageData=context.getImageData(0,0,canvas.width,canvas.height); 

var data=imageData.data; 

Từ đó bạn có thể đọc (và tùy ý thay đổi) màu của mỗi pixel.

Mảng rgba được đặt ra như thế này:

// top-left pixel (x:0,y:0) 

data[0] red of pixel#0 (0-255) 
data[1] green of pixel#0 (0-255) 
data[2] blue of pixel#0 (0-255) 
data[3] alpha of pixel#0 (opacity: 0-255) 

// next pixel (x:1,y:0) 

data[4] red of pixel#1 
data[5] green of pixel#1 
data[6] blue of pixel#1 
data[7] alpha of pixel#1 

Bạn có thể thay đổi R, G, B hoặc A thành phần của bất kỳ điểm ảnh bằng cách thay đổi các mảng dữ liệu

Ví dụ, điều này thay đổi pixel trái trên xuống rắn đỏ

data[0]=255; // red 
data[1]=0;  // green 
data[2]=0;  // blue 
data[3]=255; // alpha (opacity) 

Về tính minh bạch:

Thành phần alpha của mỗi pixel xác định độ trong suốt của pixel.Nếu bạn chỉ muốn thay đổi pixel chủ yếu là đục sau đó bạn có thể dễ dàng bỏ qua tất cả các điểm ảnh bán trong suốt như thế này:

// alpha is 0-255 
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent) 

if(data[3]<200) { // don't process this pixel } 

Cuối cùng, bạn có thể đẩy pixel bị thay đổi của bạn trở lại vào khung với .putImageData

context.putImageData(imageData,0,0); 

Lưu ý về Demo

Thật khó để "Recolor" một hình ảnh sử dụng tông màu RGBA mặc định của canvas.

Vì vậy, bản demo này chuyển đổi dữ liệu RGB để chương trình HSL màu. Điều này cho phép "color" (màu sắc) phải được thay đổi mà không ảnh hưởng đến các thành phần khác của pixel (S = bão hòa của màu sắc, L = nhẹ nhàng của màu sắc).

Sau pixel được recolored, mà sửa đổi dữ liệu HSL được chuyển đổi trở lại RGBA và lưu vào mảng dữ liệu.