Share
Trang chủ / Tất cả hướng dẫn / Không phân loại / Tách color của ảnh bằng javascript

Tách color của ảnh bằng javascript

Gần đây mình cảm thấy rất thích làm quote, đưa những câu nói hay lên những bức ảnh đẹp. Như vậy nó dễ tiếp cận với đông đảo người dùng hơn. Cũng là một cách thú vị để đọc hoặc dùng nó để trang trí. Một vấn đề mình gặp phải chính là màu sắc. Để màu chữ và màu nền được hài hòa với nhau, mình cần phải nắm bắt được palette màu của ảnh đó. Mình làm quote trên photoshop, nhưng mình chọn ảnh trên web và nếu muốn nắm bắt palette ngay tức khắc, thì không còn cách nào khác là phải sử dụng javascript.

Color Thief Example
Color Thief Example

Bài viết hôm nay mình sẽ giới thiệu về một thư viện javascript hỗ trợ lấy palette màu của một bức ảnh bất kỳ. Với cái tên rất hóm hỉnh “Color Thief”.

Color Thief

Tất nhiên rồi, thư viện này sẽ giúp bạn lấy ra các palette của một bức ảnh cho trước. Nó được viết bởi Lokesh Dhakar, Đây cũng là tác giả của thư viện lightbox mà mình hay sử dụng : lightbox2.

Khi lấy màu, thì có hai thứ mà người ta quan tâm, là màu chủ đạo và palette. Màu chủ đạo thì chỉ có một màu chính duy nhất cả cả bức ảnh, còn palette là một list các màu phổ biến và liên tục nhau trên ảnh.

Cách sử dụng

Sử dụng nó vô cùng đơn giản, Bạn cần select image sau đó truyền vào tham số cho hàm getColor và getPalette là sẽ có một màu hoặc một danh sách màu để sử dụng. Đoạn code dưới đây là một ví dụ thú vị :

var mainColor = colorThief.getColor(img[0]);
var color = "rgb("+mainColor[0] + "," + mainColor[1] + "," + mainColor[2] + ")";
var palette = colorThief.getPalette(img[0], 10);    
for(var index = 0; index < palette.length; index++){
 var color = "rgb("+palette[index][0] + "," + palette[index][1] + "," + palette[index][2] + ")";
}

Nếu bạn select img bằng jquery thì cần lấy ra dom của nó bằng img[0], còn nếu sử dụng document.querySelect thì không cần, chỉ cần dùng img thôi.

Lời kết

Thư viện này đơn giản, gọn nhẹ mà ứng dụng cũng khá thú vị. Như bạn thấy trong demo, màu backgroud và màu của ảnh khá hoài hòa và hợp tone với nhau. Tùy theo khiếu thẩm mĩ và design của bạn mà bạn có thể linh động sử dụng các màu này làm màu nền, màu button hoặc màu background sao cho phù hợp. Nếu bạn sử dụng nó cho một project nào khác và thấy đẹp, hãy comment tại đây để mọi người biết nhé,