Содержание
Взаимодействие с пользователем — одна из самых важных вещей, которую следует учитывать при создании приложения, у них должна быть возможность изменить цвет пользовательского интерфейса в соответствии с их желанием, что сделает ваше приложение уникальным и интересным для вашего пользователя. Удивительная функция, которую вы должны реализовать, если вы разрешите пользователям загружать изображения профиля, установить цвет пользовательского интерфейса в соответствии с доминирующим цветом изображения профиля, как это делает Github. Вы можете легко извлекать цвета из изображений в браузере, используя JavaScript, однако реализация на стороне сервера может быть проще, чем работа с ним в браузере и забота о совместимости в разных браузерах.
В этой статье вы узнаете, как извлечь доминирующие цвета из изображения (или пользовательской цветовой палитры), используя 3 разные библиотеки PHP в вашем проекте Symfony 3.
А. Использование ColorExtractor
Первая библиотека ColorExtractor — это полезная библиотека, которая извлекает цвета из изображения, как это сделал бы человек.
Монтаж
Чтобы установить библиотеку Color Extractor в вашем проекте, откройте терминал, переключитесь в каталог вашего проекта и установите его, используя:
composer require league/color-extractor:0.3.*Кроме того, вы можете установить его вручную, изменив composer.json файл вашего проекта и добавление библиотеки в качестве зависимости:
{
"require": {
"league/color-extractor": "0.3.*"
}
}
Затем выполните composer install и вы готовы его использовать. Для получения дополнительной информации о библиотеке, пожалуйста, посетите официальный репозиторий Github здесь.
Извлечение наиболее важных цветов
Color Extractor создает цветовую палитру в тот момент, когда вы указываете путь изображения к статическому методу fromFilename, Эта палитра содержит все цвета на изображении в виде массива с целыми числами, каждое целое число представляет цвет, поэтому вам нужно использовать fromInToHex метод класса Color:
get('kernel')->getRootDir() . '/../web/bird.png';
// Create the palette of the image
$palette = Palette::fromFilename($imagePath);
// Create an instance of the extractor
$extractor = new ColorExtractor($palette);
// Extract only the 5 representative colors in the image
$colors = $extractor->extract(5);
// An array to store the hexadecimal colors
$hexColors = [];
// Loop through the 5 representative colors (in integer format)
foreach($colors as $color) {
// Convert the number to its hex representation and add to the $hexColors array
array_push($hexColors , Color::fromIntToHex($color));
}
// ["#FF7B16","#DFC017","#679C0C","#E60B11","#186108"]
return new Response(json_encode($hexColors));
}
}Извлечение всех цветов
Вместо этого вы можете перебрать всю палитру, чтобы получить все цвета изображения (обратите внимание, что размер массива будет довольно велик в соответствии с изображением):
get('kernel')->getRootDir() . '/../web/bird.png';
// Create the palette of the image
$palette = Palette::fromFilename($imagePath);
// Create an instance of the extractor
$extractor = new ColorExtractor($palette);
// An array to store the hexadecimal colors
$hexColors = [];
// Loop through the 5 representative colors (in integer format)
foreach($palette as $color => $count) {
// Convert the number to its hex representation and add to the $hexColors array
array_push($hexColors , Color::fromIntToHex($color));
}
// ["#FF7B16","#DFC017","#679C0C","#E60B11","#186108", .......]
return new Response(json_encode($hexColors));
}
}Б. Использование ImagePalette
ImagePalette используется для извлечения цветовой палитры из данного изображения. Помимо того, что ImagePalette является нативной реализацией PHP, она отличается от многих экстракторов палитр тем, что работает с цветовой палитрой белого списка.
Монтаж
Чтобы установить эту библиотеку в свой проект, откройте терминал, перейдите в каталог вашего проекта и установите его, используя:
composer require brianmcdo/image-paletteИли вы можете изменить свой composer.json файл и добавить библиотеку как зависимость вручную:
{
"require": {
"brianmcdo/image-palette": "^2.0"
}
}
А потом беги composer install, Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий Github здесь.
Извлечение цветов
Извлечение цветов с помощью этой библиотеки довольно просто, просто импортируйте класс ImagePalette, а затем приступайте к созданию его экземпляра. Конструктор ожидает относительный или абсолютный путь к файлу для обработки (он также работает с внешними URL-адресами). Затем получите палитру цветов, открыв colors свойство созданного экземпляра:
get('kernel')->getRootDir() . '/../web/bird.png';
// initiate with image
$palette = new ImagePalette($imagePath);
// Get the prominent colors
// That returns an array of Color objects
$colors = $palette->colors;
// Or if you want a specific number of colors, use the getColors method and provide
// as first argument the number of colors that should be returned
//$colors = $palette->getColors(7);
// You can print the colors in different formats
foreach ($palette as $color) {
// Color provides several getters/properties
dump($color); // '#ffffdd'
dump($color->rgbString); // 'rgb(255,255,221)'
dump($color->rgbaString); // 'rgba(255,255,221,0.25)'
dump($color->int); // 0xffffdd
dump($color->rgb); // array(255,255,221)
dump($color->rgba); // array(255,255,221,0.25)
}
// Return the palette as response
// ["#ffffdd", "#ff9900" ... ]
return new Response($palette);
}
}C. Использование Color Thief
Класс PHP для получения цветовой палитры с изображения. Для этого используются библиотеки PHP и GD или Imagick. Это PHP-порт библиотеки Color Thief Javascript, использующий алгоритм MMCQ (модифицированное срединное квантование среза) из библиотеки Leptonica.
Требования
В отличие от других библиотек в этой статье, Color Thief предъявляет некоторые требования, которые вам соответствуют:
- PHP> = 5.3 или> = PHP 7.0
- GD> = 2.0 и / или Imagick> = 2.0 и / или Gmagick> = 1.0
- Поддержка изображений JPEG, PNG и GIF.
Если на вашем сервере установлен GD или Imagick, вы можете работать с этой библиотекой.
Монтаж
Чтобы установить эту библиотеку, откройте новый терминал, переключитесь в каталог вашего проекта и установите его с помощью следующей команды:
composer require ksubileau/color-thief-phpКроме того, вы можете установить его, изменив composer.json файл вашего проекта и добавление этой библиотеки в качестве зависимости:
{
"require": {
"ksubileau/color-thief-php": "^1.3"
}
}
Тогда беги composer install, Если вам нужна дополнительная информация об этой библиотеке, пожалуйста, посетите официальный репозиторий Github здесь.
Создание палитры цветов
Вы можете получить палитру всех доминирующих цветов из изображения с помощью статического getPalette метод. Этот метод ожидает в качестве первого аргумента абсолютный или относительный путь обработки изображения и в качестве второго аргумента максимальное количество цветов, которые будут извлечены:
get('kernel')->getRootDir() . '/../web/bird.png';
// Extract the palette of colors of the image with max. 8 colors
$palette = ColorThief::getPalette($imagePath, 8);
// RGB representation of the colors
// [[221,139,30],[60,100,16],[227,211,181],[196,48,20],[119,141,24],[226,207,32],[84,172,14]]
return new Response(json_encode($palette));
}
}Извлечение одного цвета
Если вы хотите извлечь один цвет, например, чтобы определить цвет пользовательского интерфейса в соответствии с загруженной фотографией профиля пользователя, вы можете сделать это быстро и просто с помощью статического метода. getColor:
get('kernel')->getRootDir() . '/../web/bird.png';
// Extract the dominant color of the image
$dominantColor = ColorThief::getColor($imagePath);
// RGB representation of the color
// R G B
// [0 => 196, 1 => 139, 2 => 28 ]
return new Response(json_encode($dominantColor));
}
}
