Liker
Discuter
Partager
Offrir
Youtube

Laravel : Manipuler les images avec Intervention image

Mis à jour il y a 1 mois

Un tutoriel pour installer, configurer et traiter les images (redimensionner, rogner, colorier, composer, ...) avec le package intervention/image dans un projet Laravel

Wilo Ahadi

Auteur

Wilo A.

Technologies

Laravel, PHP

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 :

Extensions fileinfo et gd2 activés dans 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

Installation d'intervention/image par composer

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 ! 😊

Cette publication vous a plu ?
Encouragez-nous en la partageant sur les réseaux sociaux

Wilo Ahadi
Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil Suivre

Commentaires