Топ 5: Лучшее извлечение цвета изображения Плагины JavaScript и jQuery

Задача извлечения цвета из изображения с помощью Javascript, безусловно, не является повседневной задачей (обычно). Тем не менее, некоторые разработчики нашли время, чтобы написать полезные плагины, которые делают реализацию этой функции действительно простой и понятной, как и любой плагин для Javascript. Вы можете использовать такую ​​функцию, например, для реализации пользовательского интерфейса с адаптацией цвета в соответствии с профилем пользователя или другими сумасшедшими вещами.

Наслаждайтесь нашей пятеркой лучших плагинов для извлечения цвета, написанных на Javascript.

5. imgcolr

Github

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

Github

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);
}
});

Он легко настраивается и зависит от следующих функций браузера:

Читайте также:  JSPaint: потрясающий римейк Microsoft Paint для веб-сайтов (95, 98, версия XP)

3. Colorify.js

Github

Colorify — это скрипт, написанный на Javascript, который позволяет вам извлекать цвета из изображений и манипулировать ими. Colorify.js оживит ваш дизайн от простого простого цвета на основе доминирующего цвета до красивого градиента на основе цветов краев изображения. В итоге, с Colorify.js, вы можете :

  • Извлечь доминирующий цвет из изображения
  • Генерация градиентов на основе цветов изображений
  • Изолируйте цвета и манипулируйте ими повсюду на странице
  • Создать Ленивый-открыватель система для ваших изображений
  • Загрузить изображение динамически
  • Создать любой colorify({}); случаи, которые вы хотите

2. Цветной вор

Github

Color Thief Javascript Демо

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

Github

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 для извлечения цветов изображения, не стесняйтесь и поделитесь им с сообществом в поле для комментариев.

Ссылка на основную публикацию
Adblock
detector