Laravel : Manipuler les images avec Intervention image

Introduction à intervention/image

Intervention Image est une bibliothèque (library) PHP open source qui permet de manipuler et traiter les images : créer, modifier, redimensionner, rogner, colorier, composer une image, ...

Pour travailler avec les images, intervention/image requiert les éléments suivants :

• PHP >= 5.4
• L'extension PHP fileinfo
• La bibliothèque GD (>=2.0) ou l'extension PHP Imagick (>=6.5.7)

La capture ci-dessous présente les extensions fileinfo et gd2 activés dans mon fichier de configuration php.ini :

Installer et configurer Intervention Image

Nous allons procéder en trois étapes pour mettre en place le package Intervention Image dans un projet Laravel :

1. Télécharger Intervention Image

Plaçons-nous dans la console (invite de commandes) à la racine du projet Laravel, exécutons la commande composer suivante pour importer intervention/image avec ses dépendances :

composer require intervention/image

2. Intégrer Intervention Image

Pour intégrer intervention/image dans l'application après l'avoir téléchargé, ouvrons le fichier de configuration config/app.php, ajoutons le service provider ImageServiceProvider::class au tableau $providers :

Intervention\Image\ImageServiceProvider::class

Puis la façade « Image » au tableau $aliases :

'Image' => Intervention\Image\Facades\Image::class

3. Configurer Intervention Image

Pour modifier la configuration par défaut d'Intervention Image, nous pouvons publier le fichier de configuration en exécutant la commande artisan suivante :

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Ce qui nous apporte le fichier config/image.php où nous pouvons éditer la configuration intervention/image.

Exemple

Modifions l'extension PHP « gd » de traitement d'images par défaut en « imagick » :

'driver' => 'imagick'

La documentation PHP explique comment installer/configurer ImageMagick : https://www.php.net/manual/fr/imagick.setup.php

Utiliser Intervention Image

La documentation de l'API Intervention Image présente de nombreuses méthodes : http://image.intervention.io

On y trouve :

• blur() pour appliquer un filtre de flou gaussien sur une image
• brightness() pour modifier la luminosité d'une image
• contrast() pour modifier le contraste d'une image
• greyscale() pour transformer une image en niveaux de gris
• text() pour écrire du texte sur une image
• ...

Nous allons exploiter quelques-unes d'entre elles pour :

1. Obtenir les informations d'une image : width(), height(), mime(), filesize()
2. Redimensionner une image : resize()
3. Convertir une image en base64 : encode()

Pour ce faire, nous avons besoin d'un formulaire d'upload d'image :

<form method="POST" action="{{ route('processing') }}" enctype="multipart/form-data" >
	{{ csrf_field() }}
	<input type="file" name="picture" >
	{{ $errors->first('picture', ':message') }}
	<input type="submit" value="Valider" >
</form>

Ce formulaire est traité par la route « processing » de méthode POST que nous devons avoir au fichier routes/web.php :

Route::post("processing", "PictureController@processing")->name('processing');

Nous allons manipuler une image uploadée dans la méthode processing(Request $request) du contrôleur PictureController.php :

1. Obtenir les informations d'une image

Affichons les informations (height, width, mime, size) d'une image uploadée :

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use Image;

class PictureController extends Controller
{
    // Le traitement de l'image uploadée
    public function processing (Request $request) {

    	// Validation de l'image
    	$this->validate($request, [
    		'picture' => "bail|required|image"
    	]);

        // Créer une ressource de l'image
    	$image = Image::make($request->picture);

    	// Les informations de l'image
    	dd("Taille : ".$image->width()." x ".$image->height()." px - Mime : ".$image->mime()." - Size : ".$image->filesize());
    }
}

2. Redimensionner une image

Créons une miniature 120x80 pixels d'une image uploadée puis enregistrons-la dans le dossier « public/images/ » sous le nom de « miniature.jpg » :

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use Image;

class PictureController extends Controller
{
    // Le traitement de l'image uploadée
    public function processing (Request $request) {

    	// Validation de l'image
    	$this->validate($request, [
    		'picture' => "bail|required|image"
    	]);

        // Créer une ressource de l'image
    	$image = Image::make($request->picture);
    	
    	$image->resize(120, 80); // Redimensionnement de l'image à 120 x 80 px
    	$image->save(public_path()."/images/miniature.jpg"); // Enregistrement de l'image
    }
}

3. Convertir une image en base64

Le base64 est un schéma d'encodage utilisé pour représenter les données binaires dans un format texte.

Convertissons une image uploadée en base64 :

// Créer une ressource de l'image
$image = Image::make($request->picture);

// Conversion de l'image en base64
$image_base64 = (string) $image->encode("data-url");

dd($image_base64);

Portez-vous ! 😊