Comment télécharger et recadrer une image dans Laravel à l’aide d’imgAreaSelect et de la bibliothèque d’images d’intervention

Dernière mise à jour Oct 18, 2021

Teneur

Télécharger et recadrer l’image à l’aide de la bibliothèque d’images d’intervention

Commencer

Pour commencer, vous devriez avoir installé le Laravel. Si vous ne l’avez pas encore créé, installez-le via la commande :

composer create-project --prefer-dist laravel/laravel laravel-dev

La commande ci-dessus configurera le projet Laravel appelé ‘laravel-dev’ pour vous.

Ensuite, installez la bibliothèque d’images Intervention dans votre projet Laravel. Exécutez la commande ci-dessous à partir du répertoire racine du projet.

composer require intervention/image

Après avoir installé la bibliothèque, ouvrez le config/app.phpfichier et ajoutez-y les lignes suivantes.

Ajoutez les fournisseurs de services pour ce package dans le $providerstableau.

InterventionImageImageServiceProvider::class

Ajoutez la façade au $aliasestableau.

'Image' => InterventionImageFacadesImage::class

Enfin, téléchargez le plugin imgAreaSelect. À partir du zip téléchargé, copiez les images, CSS, fichier JS et collez-les dans le dossier public du projet Laravel. Fondamentalement, votre structure devrait ressembler à la capture d’écran ci-dessous.

Comment utiliser imgAreaSelect

Comme nous allons utiliser CSS et JS du plugin imgAreaSelect, construisons une structure pour cela. Créez un resources/views/layouts/app.blade.phpfichier et ajoutez-y le code ci-dessous.

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <title>{{ config('app.name', 'Laravel') }}</title>
  
    @yield('style')
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
    
    @yield('footer')
</body>
</html>

Ce fichier agit comme un fichier commun pour toutes les lames. En utilisant les espaces réservés (@yield), on peut placer le code dans le fichier blade aux endroits respectifs comme dans l’en-tête, le pied de page, etc.

Créez un image.blade.phpfichier dans le resources/viewsrépertoire. Ce fichier lame aura le code suivant.

image.lame.php

@extends('layouts.app')
  
@section('style')
    <link rel="stylesheet" href="{{ asset('css/imgareaselect.css') }}" />
@endsection
  
@section('content')
  
    @if(session('success'))
        <div class="alert alert-success">{{session('success')}}</div>
    @endif
     
    <div class="container mt-5">
        <form action="{{ url('image') }}" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="exampleInputImage">Image:</label>
                <input type="file" name="profile_image" id="exampleInputImage" class="image" required>
                <input type="hidden" name="x1" value="" />
                <input type="hidden" name="y1" value="" />
                <input type="hidden" name="w" value="" />
                <input type="hidden" name="h" value="" />
            </div>
            {{ csrf_field() }}
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <div class="row mt-5">
            <p><img id="previewimage" style="display:none;"/></p>
            @if(session('path'))
                <img src="{{ session('path') }}" />
            @endif
        </div>
    </div>
@endsection
 
@section('footer')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{{ asset('js/jquery.imgareaselect.min.js') }}"></script>
    <script>
    jQuery(function($) {
        var p = $("#previewimage");
 
        $("body").on("change", ".image", function(){
            var imageReader = new FileReader();
            imageReader.readAsDataURL(document.querySelector(".image").files[0]);
 
            imageReader.onload = function (oFREvent) {
                p.attr('src', oFREvent.target.result).fadeIn();
            };
        });
 
        $('#previewimage').imgAreaSelect({
            onSelectEnd: function (img, selection) {
                $('input[name="x1"]').val(selection.x1);
                $('input[name="y1"]').val(selection.y1);
                $('input[name="w"]').val(selection.width);
                $('input[name="h"]').val(selection.height);            
            }
        });
    });
    </script>
@endsection

Vous avez peut-être remarqué des éléments du fichier ci-dessus comme @extends('layouts.app'), @section('style'), @section('content'), etc. Ces sections iront aux emplacements respectifs de app.blade.php. L’utilisateur peut s’en faire une meilleure idée en visualisant la source de cette page dans le navigateur.

Pour appeler cette vue, créez un contrôleur à l’aide de la commande :

php artisan make:controller ImageController --resource

Ajoutez la référence de ce contrôleur dans le fichier de route.

itinéraires/web.php

Route::resource('image', 'ImageController');

Ouvrez le ‘ImageController’ dans l’éditeur et à la méthode ‘index’ appelez le fichier de vue.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Image;
 
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        return view('image');
    }
    .....
}

Exécutez la php artisan servecommande et vous pourrez voir votre formulaire à l’URL ci-dessous.

http://localhost:8000/image

Lorsque vous téléchargez l’image, vous devriez voir l’image d’aperçu sous le formulaire. À partir de cet aperçu, vous pouvez sélectionner une partie de l’image que vous souhaitez recadrer.

Télécharger et recadrer l’image à l’aide de la bibliothèque d’images d’intervention

À ce stade, nous avons terminé avec le code côté client où l’utilisateur peut choisir une partie de l’image qu’il souhaite recadrer. La tâche suivante consiste à recadrer l’image et à la stocker sur le serveur. Pour stocker une image sur un serveur, j’utiliserai la fonction de stockage Laravel où nous créons un lien symbolique d’un dossier « stockage ». Pour créer un lien symbolique, exécutez la commande :

php artisan storage:link

Cette commande crée un répertoire « stockage » dans le dossier « public ».

Dans notre contrôleur, nous avons déjà inclus une façade use Image;, vous pouvez donc utiliser la bibliothèque d’images Intervention pour recadrer l’image côté serveur. La store()méthode du contrôleur devrait avoir un code comme ci-dessous :

/**
 * Store a newly created resource in storage.
 *
 * @param  IlluminateHttpRequest  $request
 * @return IlluminateHttpResponse
 */
public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();
 
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
 
        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();
 
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
 
        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
 
        if(!file_exists(public_path('storage/profile_images/crop'))) {
            mkdir(public_path('storage/profile_images/crop'), 0755);
        }
 
        // crop image
        $img = Image::make(public_path('storage/profile_images/'.$filenametostore));
        $croppath = public_path('storage/profile_images/crop/'.$filenametostore);
 
        $img->crop($request->input('w'), $request->input('h'), $request->input('x1'), $request->input('y1'));
        $img->save($croppath);
 
        // you can save crop image path below in database
        $path = asset('storage/profile_images/crop/'.$filenametostore);
 
        return redirect('image')->with(['success' => "Image cropped successfully.", 'path' => $path]);
    }
}

Dans ce code, nous stockons une version recadrée d’une image dans le répertoire ‘public/storage/profile_images/crop’. Après l’avoir stocké, nous passons un chemin de l’image recadrée vers la vue. Et dans le fichier de vue, nous avons déjà ajouté un code qui affiche l’image recadrée à l’utilisateur final.

Définir la largeur maximale sur l’image

Parfois, les utilisateurs peuvent vouloir définir la largeur maximale pour la version recadrée d’une image. Le plugin imgAreaSelect fournit plusieurs options comme aspectRatio, maxWidth, maxHeight, etc. pour personnaliser le résultat final d’une image. Un utilisateur peut utiliser l’option maxWidth en modifiant le code JavaScript comme suit :

$('#previewimage').imgAreaSelect({
    maxWidth: '1000', // this value is in pixels
    onSelectEnd: function (img, selection) {
        $('input[name="x1"]').val(selection.x1);
        $('input[name="y1"]').val(selection.y1);
        $('input[name="w"]').val(selection.width);
        $('input[name="h"]').val(selection.height);            
    }
});

Il s’agit de télécharger et de recadrer des images dans Laravel. J’espère que vous avez appris à gérer la tâche de recadrage d’images. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net