- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Khi các bạn tải lên một hình ảnh và muốn biết xem hình ảnh này sử dụng những màu sắc gì để phục vụ cho một chức năng nào đó thì các bạn có thể sử dụng thư viện Vibrant.js. Thư viện Vibrant.js có khả năng nhận diện nhiều màu sắc tồn tại trong một hình ảnh và trả về cho các bạn danh sách các màu sắc đó. Tuy nhiên, thư viện Vibrant.js không trả về toàn bộ các màu xuất hiện trong hình ảnh mà chỉ nhận diện và trả về các nhóm màu có sự khác biệt nhau hoàn toàn. Vì vậy, các hình ảnh có màu chuyển sắc đều liên tiếp có thể thư viện Vibrant.js chỉ nhận diện và trả về một màu duy nhất.
Các bạn tải thư viện Vibrant.js tại địa chỉ https://github.com/jariz/vibrant.js và tích hợp vào website như sau:
Bây giờ, các bạn sử dụng thư viện Vibrant.js như sau:
Các bạn có thể tìm hiểu thêm về thư viện Vibrant.js tại địa chỉ http://jariz.github.io/vibrant.js.
Các bạn tải thư viện Vibrant.js tại địa chỉ https://github.com/jariz/vibrant.js và tích hợp vào website như sau:
HTML:
<script src="path/to/Vibrant.min.js"></script>
JavaScript:
//Khởi tạo thành phần img
var image = document.createElement('img');
//Gán đường dẫn tới hình ảnh
image.setAttribute('src', 'path/to/image.png');
//Tạo sự kiện load
image.addEventListener('load', function() {
//Khởi tạo đối tượng vibrant
var vibrant = new Vibrant(image);
//Lấy các nhận diện
var swatches = vibrant.swatches();
//Liệt kê danh sách màu
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
console.log(swatch, swatches[swatch].getHex());
}
}
});