Un tutoriel pour installer, configurer et traiter les images (redimensionner, rogner, colorier, composer, ...) avec le package intervention/image dans un projet Laravel
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 :
La capture ci-dessous présente les extensions fileinfo et gd2 activés dans mon fichier de configuration php.ini :
Nous allons procéder en trois étapes pour mettre en place le package Intervention Image dans un projet Laravel :
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
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
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
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 imagebrightness()
pour modifier la luminosité d'une imagecontrast()
pour modifier le contraste d'une imagegreyscale()
pour transformer une image en niveaux de gristext()
pour écrire du texte sur une imageNous allons exploiter quelques-unes d'entre elles pour :
width()
, height()
, mime()
, filesize()
resize()
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 :
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());
}
}
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
}
}
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 ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.
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
Commentaires