Posted on: July 09, 2020 04:59 PM
Posted by: Renato
Views: 578
A experiência do usuário é uma das coisas mais importantes a serem consideradas ao criar seu aplicativo. Eles devem ter a opção de alterar a cor da interface do usuário de acordo com o desejo deles, o que tornará seu aplicativo único e interessante para o usuário. Um recurso incrível que você deve implementar é o seguinte: se você permitir que os usuários enviem fotos do perfil, defina a cor da interface do usuário de acordo com a cor dominante da imagem do perfil, como o Github. Você também pode extrair a cor das imagens facilmente no navegador usando JavaScript , mas a implementação no servidor pode ser mais fácil do que lidar com ela no navegador e se preocupar com a compatibilidade em diferentes navegadores.
Neste artigo, você aprenderá como extrair as cores dominantes de uma imagem (ou paleta de cores personalizada) usando 3 bibliotecas PHP diferentes no seu projeto Symfony 3.
A. Using ColorExtractor - Installation
$ composer require league/color-extractor:0.3.*
Alternatively, you can install it manually by modifying the composer.json file of your project and adding the library as a dependency:
{
"require": {
"league/color-extractor": "0.3.*"
}
}
Em seguida, execute a instalação do compositor e você estará pronto para usá-lo. Para mais informações sobre a biblioteca, visite o repositório oficial do Github aqui. the official Github repository here.
Extracting most important colors
O Color Extractor cria uma paleta de cores no momento em que você fornece um caminho de imagem para o método estático fromFilename. Essa paleta contém todas as cores da imagem como uma matriz com números inteiros; cada número inteiro representa uma cor; portanto, você precisa usar o fromInToHexmétodo da classe Color:
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
/**
* Import Library required classes
*/
use League\ColorExtractor\Color;
use League\ColorExtractor\ColorExtractor;
use League\ColorExtractor\Palette;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// The relative or absolute path to the image file
$imagePath = $this->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));
}
}
Extraindo todas as cores
Você pode percorrer toda a paleta para recuperar todas as cores da imagem (observe que o tamanho da matriz será bastante grande de acordo com a imagem):
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
/**
* Import Library required classes
*/
use League\ColorExtractor\Color;
use League\ColorExtractor\ColorExtractor;
use League\ColorExtractor\Palette;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// The relative or absolute path to the image file
$imagePath = $this->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));
}
}
B. Usando o ImagePalette
O ImagePalette é usado para extrair uma paleta de cores de uma determinada imagem. Além de ser uma implementação nativa do PHP, o ImagePalette difere de muitos extratores de paleta, pois funciona com uma paleta de cores da lista branca.
Instalação
Para instalar esta biblioteca em seu projeto, abra um terminal, alterne para o diretório do seu projeto e instale-o usando:
$ composer require brianmcdo/image-palette
Como alternativa, você pode modificar seu composer.jsonarquivo e adicionar a biblioteca como uma dependência manualmente:
{
"require": {
"brianmcdo/image-palette": "^2.0"
}
}
E então corra composer install. Para mais informações sobre esta biblioteca, visite o repositório oficial do Github aqui .
Extraindo cores
A extração de cores com esta biblioteca é bastante simples, basta importar a classe ImagePalette e, em seguida, prossiga para criar uma instância dela. O construtor espera que o caminho relativo ou absoluto do arquivo seja processado (ele também funciona com URLs externos). Em seguida, obtenha a paleta de cores acessando a colorspropriedade da instância criada:
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
/**
* Import the ImagePalette class
*/
use BrianMcdo\ImagePalette\ImagePalette;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// The absolute or relative path of the image
$imagePath = $this->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. Usando ladrão de cores
Uma classe PHP para pegar a paleta de cores de uma imagem. Usa bibliotecas PHP e GD ou Imagick para que isso aconteça. É uma porta PHP da biblioteca Javascript do Color Thief, usando o algoritmo MMCQ (quantificação de corte mediana modificada) da biblioteca Leptonica.
Exigências
Ao contrário das outras bibliotecas deste artigo, o Color Thief possui alguns requisitos para atender a alguns requisitos:
PHP> = 5.3 ou> = PHP 7.0
GD> = 2.0 e / ou Imagick> = 2.0 e / ou Gmagick> = 1.0
Suporte para imagens JPEG, PNG e GIF.
Se você possui o GD ou Imagick instalado no seu servidor, pode trabalhar com esta biblioteca.
Instalação
Para instalar esta biblioteca, abra um novo terminal, alterne para o diretório do projeto e instale-o com o seguinte comando:
$ composer require ksubileau/color-thief-php
Como alternativa, você pode instalá-lo modificando o composer.jsonarquivo do seu projeto e adicionando esta biblioteca como uma dependência:
{
"require": {
"ksubileau/color-thief-php": "^1.3"
}
}
Então corra composer install.
Criando uma paleta de cores
Você pode recuperar uma paleta de todas as cores dominantes da imagem usando o getPalettemétodo estático . Este método espera como primeiro argumento o caminho absoluto ou relativo da imagem a processar e como segundo argumento o número máximo de cores que serão extraídas:
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
/**
* Import the ColorThief class
*/
use ColorThief\ColorThief;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// The absolute or relative path of the image
$imagePath = $this->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));
}
}
Extraindo cor única
Se você deseja extrair uma única cor, por exemplo, para definir a cor da interface do usuário de acordo com a foto de perfil carregada do usuário, você pode torná-la rápida e simples com o método estático getColor:
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
/**
* Import the ColorThief class
*/
use ColorThief\ColorThief;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
// The absolute or relative path of the image
$imagePath = $this->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));
}
}
Feliz codificação !
Donate to Site
Renato
Developer