Share Nhận diện các màu sắc có trong hình ảnh với thư viện Vibrant.js

filiallion

Administrator
Staff member
Administrator
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:
HTML:
<script src="path/to/Vibrant.min.js"></script>
Bây giờ, các bạn sử dụng thư viện Vibrant.js như sau:
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());
        }
    }
});
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.
 
Back
Top