Color Palette Extractor of Image in Laravel

Posted on: September 20, 2020 09:46 PM

Posted by: Renato

As imagens consistem em cores, mas às vezes você precisa obter as cores das imagens.

Extrator de paleta de cores

As imagens são compostas por cores. Você pode extrair a paleta hexadecimal de cores dessas imagens. Nesse post, você pode ver como podemos extrair as cores. Além disso, você pode obter a contagem de cores de cada cor.

em primeiro lugar, você precisa de manipulação de imagens e manipulação da biblioteca. Portanto, instale a biblioteca de intervenção . Portanto, execute o comando abaixo no projeto Laravel.

`1`	`$ composer` `require` `intervention/image`

Now, publish vendor into your Laravel application.

`1`	`$ php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"`

Installation and Setup

After that, install color extractor library. Similarly, intervation image runs below composer command in the Laravel project.

`1`	`$ composer` `require` `league/color-extractor:0.3.*`

Further, you can use create one model called ImageColor. Hence, it will store image name and color details in the database. Use below command to create a migration for the model.

`1`	`$ php artisan make:model Models/ImageColor -m`

This will create the Models folder inside Http Folder. And inside that ImageColor.php file. So, you can edit the migration for image colors model.

`1`	`Schema::create('image_colors',` `function` `(Blueprint` `$table) {`

`2`	`$table->increments('id');`

`3`	`$table->string('image_name')->unique();`

`4`	`$table->json('image_colors');`

`5`	`$table->integer('image_color_count');`

`6`	`$table->json('image_most_colors');`

`7`	`$table->timestamps();`

8 });

Então, agora crie um controlador chamado ColorExtractorController dentro da pasta Http. Como você já criou o controlador, vamos criar uma visualização para upload de imagem. Portanto, crie uma visão dentro da pasta resources / views / admin . Você pode criar um arquivo de acordo com a estrutura do projeto. Antes disso, crie uma rota dentro do arquivo web.php .

`1`	`Route::namespace('Admin')->group(function(){`

`2`	`Route::resource('color-extractor','ColorExtractorController');`

3 });

Upload Image

After that below is the view file for upload the image.

`1`	`@extends('layouts.admin')`

`2`	`@section('header')`

`3`	`class="page-title">Upload Image`

`4`	`@endsection`

`5`	`@section('contents')`

`6`	`class="row">`

`7`	`class="col-md-12">`

8

9

`10`	`class="card">`

`11`	`@if(\Session::has('error'))`

`12`	`class="alert alert-primary" role="alert">`

`13`	`{{\Session::get('error')}}`

14

15 @endif

`16`	`@if(\Session::has('success'))`

`17`	`class="alert alert-suucess" role="alert">`

`18`	`{{\Session::get('success')}}`

19

20 @endif

`21`	`"post" action="{{route('color-extractor.store')}}" enctype="multipart/form-data">`

22 @csrf

`23`	`@method('POST')`

24

`25`	`class="card-body">`

26

`27`	`class="form-group row">`

`28`	`class="col-md-3">Image File Upload`

`29`	`class="col-md-9">`

`30`	`class="custom-file">`

`31`	`"image_name" type="file" class="custom-file-input" id="validatedCustomFile" required>`

`32`	`class="custom-file-label" for="validatedCustomFile">Choose file...`

`33`	`@if($errors->has('image_name'))`

`34`	`class="invalid-feedback">{{$errors->first('image_name')}}`

35 @endif

36

37

38

39

`40`	`class="form-group row">`

`41`	`class="col-md-3">Number Of Color`

`42`	`class="col-md-9">`

43

`44`	`class="custom-file">`

`45`	`"no_of_color" type="number" class="form-control" id="no_of_color" placeholder="Number of color" required>`

46

`47`	`@if($errors->has('no_of_color'))`

`48`	`class="invalid-feedback">{{$errors->first('no_of_color')}}`

49 @endif

50

51

52

53

54

55

`56`	`class="border-top">`

`57`	`class="card-body">`

58

59

60

61

62

63

64

65

66

`67`	`@endsection`

Further, in the controller create method return the view.

`1`	`public` `function` `create()`

2 {

`3`	`return` `view('admin.colorextractor.create');`

4 }

Color palete in laravel

Além disso, selecionando a imagem e o número de cores, você pode enviar um formulário. Isso chamará o método de armazenamento no controlador. No método de armazenamento, há lógica para upload e movimentação de imagem por meio de intervenção. Depois disso, extraia as cores usando a biblioteca extrator de cores.

`1`	`public` `function` `store(Request` `$request)`

2 {

3 try{

`4`	`$validator` `= Validator::make($request->all(), [`

`5`	`'image_name'` `=>` `'required\|unique:image_colors\|max:255',`

`6`	`'no_of_color'` `=>` `'required'`

7 ]);

8

`9`	`if` `($validator->fails()) {`

`10`	`return` `redirect()->back()`

`11`	`->withErrors($validator)`

`12`	`->withInput();`

13 }

`14`	`DB::beginTransaction();`

`15`	`$image` `= \Image::make($request->image_name);`

`16`	`$path` `= public_path().'/upload';`

`17`	`if` `(!is_dir($path)) {`

`18`	`mkdir($path, 777, true);`

19 }

`20`	`$path` `.=` `'/'.$request->image_name->getClientOriginalName();`

21

`22`	`$image->resize(300, 200);`

`23`	`$image->save($path);`

24

`25`	`$palette` `= Palette::fromFilename($path,Color::fromHexToInt('#FFFFFF'));`

`26`	`$palette_array` `= [];`

`27`	`foreach($palette` `as` `$color` `=>` `$count) {`

28

`29`	`$palette_array[] =` `array('count'=>$count,'color'=>Color::fromIntToHex($color));`

30 }

`31`	`$image_colors` `= json_encode($palette_array);`

32

`33`	`$topFive` `=` `$palette->getMostUsedColors(5);`

34

`35`	`$topFiveColors` `= json_encode($topFive);`

`36`	`$colorCount` `=` `count($palette);`

`37`	`$totalCount` `= json_encode($colorCount);`

38

`39`	`$blackCount` `=` `$palette->getColorCount(Color::fromHexToInt('#000000'));`

40

`41`	`json_encode($blackCount);`

42

`43`	`$extractor` `=` `new` `ColorExtractor($palette);`

`44`	`// it defines an extract method which return the most “representative” colors`

`45`	`$colors` `=` `$extractor->extract($request->no_of_color);`

`46`	`$color_array` `= [];`

`47`	`foreach($colors` `as` `$color) {`

`48`	`// colors are represented by integers`

`49`	`$color_array[] =` `array('color'=>Color::fromIntToHex($color));`

50 }

51

`52`	`$most_colors` `= json_encode($color_array);`

53

`54`	`$imageColors` `=` `new` `ImageColor();`

`55`	`$imageColors->image_name =` `$request->image_name->getClientOriginalName();`

`56`	`$imageColors->image_colors =` `$image_colors;`

`57`	`$imageColors->image_color_count =` `$totalCount;`

`58`	`$imageColors->image_most_colors =` `$most_colors;`

`59`	`$imageColors->save();`

60

`61`	`\Session('error','Successully Extractor!');`

`62`	`DB::commit();`

`63`	`return` `redirect()->back();`

`64`	`}catch(\Exception` `$e){`

`65`	`DB::rollback();`

`66`	`\Session('error','Something Went Wrong!');`

`67`	`return` `redirect()->back();`

68 }

69 }

Visto que você já criou um modelo para as cores da imagem. No entanto, usando esse modelo, você pode armazenar as cores no banco de dados. Enquanto isso, você pode criar a visualização do arquivo de índice. Portanto, crie uma visão dentro da pasta resources / views / admin .

`1`	`@extends('layouts.admin')`

`2`	`@section('styles')`

3 "stylesheet" type="text/css" href="{{asset('admin/assets/extra-libs/multicheck/multicheck.css')}}">

4 "{{asset('admin/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">

`5`	`@endsection`

`6`	`@section('contents')`

`7`	`class="row">`

`8`	`class="col-12">`

`9`	`class="card">`

`10`	`class="card-body">`

`11`	`class="card-title">Colors Of images`

`12`	`class="table-responsive">`

13

"zero_config" class="table table-striped table-bordered">

`14`

15

`16`		`Name`

`17`		`Total Count`

`18`		`Action`

19

20

21

`22`	`@if(count($colors)>0)`

`23`	`@foreach($colors as $key=>$color)`

24

25 {{$color->image_name}}

26 {{$color->image_color_count}}

27

`28`	`"{{route('color-extractor.show',[$color->id])}}">Show`

29

30

31

`32`	`@endforeach`

33 @endif

34

35

36

37

38

39

40

41

42

43

`44`	`@endsection`

`45`	`@section('scripts')`

46

47

48

49

`54`	`@endsection`

Color Palette index view in Laravel

Show Color Palette

No entanto, você armazena todas as informações no banco de dados. Então, é hora de mostrar todas as cores e a maioria das cores da imagem. Portanto, crie um arquivo de exibição show.blade.php dentro da pasta resources / views / admin.

`1`	`@extends('layouts.admin')`

`2`	`@section('styles')`

3 "stylesheet" type="text/css" href="{{asset('admin/assets/extra-libs/multicheck/multicheck.css')}}">

4 "{{asset('admin/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">

`5`	`@endsection`

`6`	`@section('contents')`

`7`	`class="row">`

`8`	`class="col-6">`

`9`	`class="card">`

`10`	`class="card-body">`

`11`	`class="card-title">Color Of {{$image->image_name}}`

`12`	`class="table-responsive">`

13

"zero_config" class="table table-striped table-bordered">

`14`

15

`16`		`Name`

`17`		`Total Count`

18

19

20

`21`	`@if(count($imageColors)>0)`

`22`	`@foreach($imageColors as $key=>$color)`

23

24 {{$color['color']}}

25 {{$color['count']}}

26

27

28

`29`	`@endforeach`

30 @endif

31

32

33

34

35

36

37

38

39

`40`	`class="col-6">`

`41`	`class="card">`

`42`	`class="card-body">`

`43`	`class="card-title">Top Color Of {{$image->image_name}}`

`44`	`class="table-responsive">`

45

"top_colors" class="table table-striped table-bordered">

`46`

47

`48`		`Name`

49

50

51

`52`	`@if(count($imageMostColors)>0)`

`53`	`@foreach($imageMostColors as $key=>$color)`

54

55 {{$color['color']}}

56

57

58

`59`	`@endforeach`

60 @endif

61

62

63

64

65

66

67

68

69

70

`71`	`@endsection`

`72`	`@section('scripts')`

73

74

75

76

`82`	`@endsection`

For this controller will look likes follows.

`1`	`public` `function` `show($id)`

2 {

`3`	`$image` `= ImageColor::find($id);`

`4`	`$imageColors` `= json_decode($image->image_colors,true);`

`5`	`$imageMostColors` `= json_decode($image->image_most_colors,true);`

6

`7`	`return` `view('admin.colorextractor.show',compact('image','imageColors','imageMostColors'));`

8 }

Portanto, ao clicar no botão mostrar, você pode ver todas as cores. Portanto, isso listará todas as cores hash da imagem. Desta forma, você pode obter as cores da imagem.

Fonte: http://constituteweb.com/color-palette-extractor-in-laravel

- https://github.com/thephpleague/color-extractor