3 105 Скрипты / Other

Color thief - захват цвета


Плагин Color thief позволяющий "захватывать" доминирующий цвет с изображения. Данный скрипт может быть полезен для сайтов на которых требуется сделать сортировку и поиск по цвету.

  • В качестве примера приведем сайт: dribbble.

Также можно использовать плагин и для создания пользовательского интерфейса (UI), который адаптируется под цвет изображения. Например слегка изменить цвет шрифта или цвет границы в зависимости от того, какое изображение в данный момент отображается.

HTML

В демо примере используется следующая разметка:

<div class="imageSection">
	    <div class="imageWrap">
	        <img class="targetImage" src="img/1.jpg" data-colorcount="10" />
	    </div>
	    <div class="colors">
	        <div class="function dominantColor">
	            <h3>Доминирующий цвет</h3>
	            <div class="swatches"></div>
	        </div>
	        <div class="function medianCutPalette clearfix">
	            <h3>Палитра</h3>
	            <div class="swatches"></div>
	        </div>
	    </div>
	</div>

В атрибуте data-colorcount указывается количество отображаемых доминирующих цветов из палитры изображения.

CSS

Стиль в данном случае не важен, автор к тому же использует LESS для его формирования, о котором на нашем сайте мы ещё не говорили.

JS

Подключаем jQuery, quantize.js и плагин color-thief.js на странице.
Инициализация плагина в упрощенном виде выглядит так:


	myImage = $('#myImage');
	dominantColor = getDominantColor(myImage);
	paletteArray = createPalette(myImage, 10); // второй аргумент устанавливает количество цветов в палитре
	
В демо примере инициализация такая:В основном демо мы использовали упрощенную версию кода, в оригинальном же демо автора, используется шаблонизатор mustache.js для вывода изображений из массива. Этот пример вы можете посмотреть скачав исходник и запустив файл index1.html.
Скачать 538Загрузок 171,68 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи