Задача извлечения цвета из изображения с помощью Javascript, безусловно, не является повседневной задачей (обычно). Тем не менее, некоторые разработчики нашли время, чтобы написать полезные плагины, которые делают реализацию этой функции действительно простой и понятной, как и любой плагин для Javascript. Вы можете использовать такую функцию, например, для реализации пользовательского интерфейса с адаптацией цвета в соответствии с профилем пользователя или другими сумасшедшими вещами.
Наслаждайтесь нашей пятеркой лучших плагинов для извлечения цвета, написанных на Javascript.
5. imgcolr
imgcolr — это плагин jQuery для захвата доминирующего цвета границ данного изображения. Вы можете программно адаптировать цвет элементов на веб-странице для изображения после получения цвета. Основываясь на идее, вы можете сделать Интернет более красивым и интересным. Обратите внимание, что imgcolr не может правильно обрабатывать изображения с красочными границами. Его использование очень просто:
var imgs = $('img');
imgs.imgcolr(function (img, color) {
// `img` refers to the current img element
console.log(img);
// `color` is the grabbed color, a string like "#ededed"
console.log(color);
});Imgcolor уникален в том смысле, что он поддерживает HTML5 и Flash, так как с изображениями сторонних производителей вы получите исключение CORS в HTML5 от поставщиков браузеров. Так что imgcolr на основе HTML5 просто поддерживает новейшие современные браузеры, такие как Google Chrome и Firefox. Во всяком случае, это действительно быстрее, чем версия Flash. Вам нужно только убедиться, что JQuery и imgcolr.html5.min.js включены в вашу веб-страницу.
4. Rgbaster.js
RGBaster — это очень простая библиотека javascript для извлечения доминирующего цвета из изображения. Метод colors ожидает либо элемент DOM изображения, либо URL-адрес изображения:
var img = document.getElementById('image');
// or an URL (of your own server)
var img = 'http://example.com/path-to-image.jpg'
RGBaster.colors(img, {
success: function (payload) {
console.log('Dominant color:', payload.dominant);
console.log('Secondary color:', payload.secondary);
console.log('Palette:', payload.palette);
}
});Он легко настраивается и зависит от следующих функций браузера:
- холст
- CORS
- Array.prototype.map (могу ли я использовать, таблица совместимости)
3. Colorify.js
Colorify — это скрипт, написанный на Javascript, который позволяет вам извлекать цвета из изображений и манипулировать ими. Colorify.js оживит ваш дизайн от простого простого цвета на основе доминирующего цвета до красивого градиента на основе цветов краев изображения. В итоге, с Colorify.js, вы можете :
- Извлечь доминирующий цвет из изображения
- Генерация градиентов на основе цветов изображений
- Изолируйте цвета и манипулируйте ими повсюду на странице
- Создать Ленивый-открыватель система для ваших изображений
- Загрузить изображение динамически
- Создать любой
colorify({});случаи, которые вы хотите
2. Цветной вор
Color Thief — очень полезный и простой в использовании скрипт для получения цветовой палитры с изображения. Это холст тег, чтобы это произошло. Если вы используете изображение, которое уже загружено в DOM, вы можете синхронно получить палитру цветов:
var colorThief = new ColorThief();
var sourceImage = document.getElementById("image");
// Display main color
// e.g [125, 189, 193]
console.log(
colorThief.getColor(sourceImage)
);
// Display palette of colors
// e.g [[55,37,29],[213,193,136],[110,204,223]]
console.log(
colorThief.getPalette(sourceImage)
);1. Vibrant.js
Vibrant.js — это утилита, которая извлекает яркие цвета из изображения. Vibrant.js является портом javascript классная палитра в библиотеке поддержки Android.
var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')
img.addEventListener('load', function () {
var vibrant = new Vibrant(img);
var swatches = vibrant.swatches();
for (var swatch in swatches){
if (swatches.hasOwnProperty(swatch) && swatches[swatch]){
console.log(swatch, swatches[swatch].getHex())
}
}
/*
* Results into:
* Vibrant #7a4426
* Muted #7b9eae
* DarkVibrant #348945
* DarkMuted #141414
* LightVibrant #f3ccb4
*/
});Если вам известен еще один полезный плагин JavaScript для извлечения цветов изображения, не стесняйтесь и поделитесь им с сообществом в поле для комментариев.
