{"id":25074,"date":"2021-05-25T13:47:00","date_gmt":"2021-05-25T10:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25074"},"modified":"2021-10-18T03:10:29","modified_gmt":"2021-10-18T00:10:29","slug":"come-caricare-e-ritagliare-l-immagine-in-laravel-utilizzando-imgareaselect-e-intervention-image-library","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-caricare-e-ritagliare-l-immagine-in-laravel-utilizzando-imgareaselect-e-intervention-image-library\/","title":{"rendered":"Come caricare e ritagliare l’immagine in Laravel utilizzando imgAreaSelect e Intervention Image Library"},"content":{"rendered":"

Di recente uno dei nostri lettori ha chiesto di scrivere un articolo sul caricamento e il ritaglio di immagini in Laravel. In passato, ho pubblicato l’articolo sullo stesso argomento per PHP Upload, Crop and Resize Image in PHP<\/a>. Ma quando si tratta di Laravel, dobbiamo apportare modifiche secondo gli standard Laravel. In questo articolo, studiamo come caricare e ritagliare le immagini in Laravel.<\/p>\n

Per questo tutorial, utilizzer\u00f2 2 librerie: imgAreaSelect e Intervention Image.<\/p>\n

imgAreaSelect<\/a> \u00e8 un plugin jQuery che consente di ritagliare le immagini selezionando un’area rettangolare di un’immagine. \u00c8 un plugin leggero e facile da usare.<\/p>\n

D’altra parte, Intervention Image<\/a> \u00e8 una libreria di gestione e manipolazione delle immagini. Questa libreria ci aiuta a creare, modificare e comporre immagini lato server.<\/p>\n

In questo tutorial, user\u00f2 imgAreaSelect per ottenere le coordinate per l’immagine ritagliata e la libreria di immagini di intervento per ritagliare effettivamente l’immagine sul lato server secondo le coordinate.<\/p>\n

Iniziare<\/h3>\n

Per iniziare, dovresti aver installato Laravel. Se non l’hai ancora creato, installalo tramite il comando:<\/p>\n

composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n
Il comando precedente imposter\u00e0 per te il progetto Laravel chiamato ‘laravel-dev’.<\/p>\n
Quindi, installa la libreria di immagini di intervento nel tuo progetto Laravel. Esegui il comando seguente dalla directory principale del progetto.<\/p>\n
composer require intervention\/image<\/code><\/pre>\n
Dopo aver installato la libreria, apri il config\/app.php<\/code>file e aggiungi le seguenti righe.<\/p>\n
Aggiungi i fornitori di servizi per questo pacchetto $providers<\/code>nell’array.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Aggiungi la facciata $aliases<\/code>all’array.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Infine, scarica il plugin imgAreaSelect<\/a>. Dallo zip scaricato, copia immagini, CSS, file JS e incolla nella cartella pubblica del progetto Laravel. Fondamentalmente, la tua struttura dovrebbe essere come lo screenshot qui sotto.<\/p>\n
\"Come<\/a><\/p>\n
Come usare imgAreaSelect<\/h3>\n
Poich\u00e9 utilizzeremo CSS e JS del plugin imgAreaSelect, costruiamo una struttura per esso. Crea un resources\/views\/layouts\/app.blade.php<\/code>file e aggiungi il codice qui sotto.<\/p>\n
<!DOCTYPE html>\n<html lang=\"{{ app()->getLocale() }}\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<!-- CSRF Token -->\n\u00a0\u00a0\u00a0\u00a0<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<title>{{ config('app.name', 'Laravel') }}<\/title>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('style')\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"app\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@yield('content')\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@yield('footer')\n<\/body>\n<\/html><\/code><\/pre>\n
Questo file funge da file comune per tutti i blade. Usando i segnaposto (@yield<\/code>) \u00e8 possibile inserire il codice nel file blade nei rispettivi posti come nell’intestazione, nel pi\u00e8 di pagina, ecc.<\/p>\n
Crea un image.blade.php<\/code>file all’interno della resources\/views<\/code>directory. Questo file blade avr\u00e0 il seguente codice.<\/p>\n
image.blade.php<\/strong><\/p>\n
@extends('layouts.app')\n\u00a0\u00a0\n@section('style')\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"{{ asset('css\/imgareaselect.css') }}\" \/>\n@endsection\n\u00a0\u00a0\n@section('content')\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0@if(session('success'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">{{session('success')}}<\/div>\n\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<div class=\"container mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form action=\"{{ url('image') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputImage\">Image:<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputImage\" class=\"image\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"row mt-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@if(session('path'))\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"{{ session('path') }}\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@endif\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endsection\n\u00a0\n@section('footer')\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/jquery.imgareaselect.min.js') }}\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \".image\", function(){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.querySelector(\".image\").files[0]);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0p.attr('src', oFREvent.target.result).fadeIn();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0<\/script>\n@endsection<\/code><\/pre>\n
Potresti aver notato alcune cose dal file sopra come @extends('layouts.app')<\/code>, @section('style')<\/code>, @section('content')<\/code>, ecc. Queste sezioni andranno nei rispettivi posti di app.blade.php<\/code>. L’utente pu\u00f2 avere un’idea migliore quando si visualizza la fonte di questa pagina nel browser.<\/p>\n
Per chiamare questa vista, crea un controller usando il comando:<\/p>\n
php artisan make:controller ImageController --resource<\/code><\/pre>\n
Aggiungi il riferimento di questo controller nel file di route.<\/p>\n
route\/web.php<\/strong><\/p>\n
Route::resource('image', 'ImageController');<\/code><\/pre>\n
Apri "ImageController" nell’editor e al metodo "index" chiama il file di visualizzazione.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Display a listing of the resource.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return IlluminateHttpResponse\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function index()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('image');\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0.....\n}<\/code><\/pre>\n
Esegui il php artisan serve<\/code>comando e sarai in grado di vedere il tuo modulo all’URL sottostante.<\/p>\n
http:\/\/localhost:8000\/image<\/code><\/pre>\n
Quando carichi l’immagine dovresti vedere l’immagine di anteprima sotto il modulo. Da questa anteprima, puoi selezionare una parte dell’immagine che desideri ritagliare.<\/p>\n
\"Come<\/a><\/p>\n
Carica e ritaglia l’immagine utilizzando la libreria di immagini di intervento<\/h3>\n
A questo punto, abbiamo completato il codice lato client in cui l’utente pu\u00f2 scegliere una parte dell’immagine che desidera ritagliare. Il lavoro successivo consiste nel ritagliare l’immagine e memorizzarla sul server. Per archiviare un’immagine su un server, utilizzer\u00f2 la funzione di archiviazione di Laravel in cui creiamo un collegamento simbolico di una cartella di "archiviazione". Per creare un collegamento simbolico, esegui il comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Questo comando crea una directory di "archiviazione" nella cartella "pubblica".<\/p>\n
Nel nostro controller abbiamo gi\u00e0 incluso una facciata, use Image;<\/code>quindi sei pronto a utilizzare la libreria di immagini di Intervention per ritagliare l’immagine sul lato server. Il store()<\/code>metodo del controller dovrebbe avere un codice come di seguito:<\/p>\n
\/**\n\u00a0* Store a newly created resource in storage.\n\u00a0*\n\u00a0* @param\u00a0 IlluminateHttpRequest\u00a0 $request\n\u00a0* @return IlluminateHttpResponse\n\u00a0*\/\npublic function store(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('profile_image')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('profile_image')->getClientOriginalName();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('profile_image')->getClientOriginalExtension();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists(public_path('storage\/profile_images\/crop'))) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(public_path('storage\/profile_images\/crop'), 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ crop image\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make(public_path('storage\/profile_images\/'.$filenametostore));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = public_path('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($request->input('w'), $request->input('h'), $request->input('x1'), $request->input('y1'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ you can save crop image path below in database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$path = asset('storage\/profile_images\/crop\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with(['success' => \"Image cropped successfully.\", 'path' => $path]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
In questo codice, stiamo memorizzando una versione ritagliata di un’immagine nella directory ‘public\/storage\/profile_images\/crop’. Dopo averlo memorizzato, riportiamo alla vista un percorso dell’immagine ritagliata. E nel file di visualizzazione, abbiamo gi\u00e0 aggiunto un codice che mostra l’immagine ritagliata all’utente finale.<\/p>\n
Imposta la larghezza massima sull’immagine<\/h3>\n
A volte gli utenti potrebbero voler definire la larghezza massima per la versione ritagliata di un’immagine. Il plugin imgAreaSelect fornisce diverse opzioni come aspectRatio, maxWidth, maxHeight, ecc. per personalizzare il risultato finale di un’immagine. Un utente pu\u00f2 utilizzare l’opzione maxWidth modificando il codice JavaScript come segue:<\/p>\n
$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0maxWidth: '1000', \/\/ this value is in pixels\n\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"x1\"]').val(selection.x1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"y1\"]').val(selection.y1);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"w\"]').val(selection.width);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('input[name=\"h\"]').val(selection.height);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Si tratta di come caricare e ritagliare le immagini in Laravel. Spero che tu sappia come gestire il compito di ritagliare le immagini. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n