如何在Symfony 3中从图像中提取突出的颜色

本文概述

A.使用ColorExtractor
B.使用ImagePalette
C.使用Color Thief

用户体验是构建应用程序时要考虑的最重要的事情之一, 它们应该可以根据用户的意愿来更改UI颜色, 这将使你的应用程序对用户而言变得独特而有趣。如果你允许用户上传个人资料图片, 那么你最终应该实现的一个很棒的功能就是像Github一样根据个人资料图片的主色设置UI颜色。你也可以使用JavaScript在浏览器中轻松地从图像中提取颜色, 但是服务器端的实现可能比在浏览器中处理颜色并关心不同浏览器的兼容性要容易。

在本文中, 你将学习如何在Symfony 3项目中使用3个不同的PHP库从图像(或自定义调色板)中提取主要颜色。

A.使用ColorExtractor

第一个库ColorExtractor是一个有用的库, 可以像人类一样从图像中提取颜色。

安装

要在你的项目中安装Color Extractor库, 请打开一个终端, 切换到你的项目目录, 并使用以下命令进行安装：

composer require league/color-extractor:0.3.*

另外, 你可以通过修改项目的composer.json文件并将该库添加为依赖项来手动安装它：

{
    "require": {
        "league/color-extractor": "0.3.*"
    }
}

然后执行composer install, 就可以使用它了。有关该库的更多信息, 请访问此处的官方Github存储库。

提取最重要的颜色

当你提供fromFilename静态方法的图像路径时, Color Extractor会创建一个调色板。此调色板以整数数组的形式包含图像中的所有颜色, 每个整数代表一种颜色, 因此你需要使用Color类的fromInToHex方法：

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
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));
    }
}

提取所有颜色

你可以遍历整个调色板来检索图像中的所有颜色(请注意, 根据图像, 数组的大小将非常大)：

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
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.使用ImagePalette

ImagePalette用于从给定图像中提取调色板。除了作为本机PHP实现之外, ImagePalette与许多调色板提取器不同, 因为它可以处理白名单调色板。

安装

要在你的项目上安装此库, 请打开一个终端, 切换到项目的目录并使用以下命令进行安装：

composer require brianmcdo/image-palette

或者, 你可以修改composer.json文件, 并手动将库添加为依赖项：

{
    "require": {
        "brianmcdo/image-palette": "^2.0"
    }
}

然后运行composer install。有关此库的更多信息, 请在此处访问官方的Github存储库。

提取颜色

使用此库提取颜色非常简单, 只需导入ImagePalette类, 然后继续创建它的实例。构造函数希望处理文件的相对或绝对路径(它也适用于外部URL)。然后通过访问创建的实例的colors属性来获取调色板：

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
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.使用Color Thief

一个PHP类, 用于从图像中获取调色板。使用PHP和GD或Imagick库来实现它。它是Color Thief Javascript库的一个PHP端口, 使用了Leptonica库中的MMCQ(改进的中位数剪切量化)算法。

要求

与本文中的其他库不同, 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方法从图像中检索所有主要颜色的调色板。此方法期望将要处理的图像的绝对或相对路径作为第一个参数, 而将要提取的最大颜色数作为第二个参数：

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
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));
    }
}

提取单色

例如, 如果要提取一种颜色来根据用户上传的个人资料照片定义用户界面的颜色, 则可以使用静态方法getColor使其变得快速简单：

<?php

namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
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));
    }
}

编码愉快！

本文概述

A.使用ColorExtractor

安装

提取最重要的颜色

提取所有颜色

B.使用ImagePalette

安装

提取颜色

C.使用Color Thief

要求

安装

创建调色板

提取单色

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

A.使用ColorExtractor

安装

提取最重要的颜色

提取所有颜色

B.使用ImagePalette

安装

提取颜色

C.使用Color Thief

要求

安装

创建调色板

提取单色

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发