{"id":25370,"date":"2021-05-30T18:22:00","date_gmt":"2021-05-30T15:22:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25370"},"modified":"2021-10-18T03:07:00","modified_gmt":"2021-10-18T00:07:00","slug":"come-caricare-ritagliare-e-ridimensionare-l-immagine-utilizzando-jquery-e-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-caricare-ritagliare-e-ridimensionare-l-immagine-utilizzando-jquery-e-php\/","title":{"rendered":"Come caricare, ritagliare e ridimensionare l’immagine utilizzando jQuery e PHP"},"content":{"rendered":"

Se stai eseguendo un sito web, potresti voler ritagliare l’immagine in determinati scenari. Supponiamo che tu voglia consentire all’utente di ritagliare le immagini del profilo prima del caricamento. In questo articolo, studiamo come caricare, ritagliare e ridimensionare l’immagine utilizzando imgAreaSelect e PHP.<\/p>\n

Possiamo dire che quando ritagliamo l’immagine, la stiamo effettivamente ridimensionando regolandola con le coordinate fornite della parte ritagliata.<\/p>\n

imgAreaSelect<\/a> \u00e8 un plugin jQuery che fornisce una funzionalit\u00e0 per ritagliare le immagini. \u00c8 un plugin leggero e facile da usare.<\/p>\n

Per iniziare, \u00e8 necessario utilizzare il plug-in imgAreaSelect e la libreria di immagini di intervento<\/a>. Usando imgAreaSelect scegliamo l’area dell’immagine che deve essere ritagliata e la libreria di immagini di Internetntion ci aiuta a memorizzare la versione originale e copiata di un’immagine sul server.<\/p>\n

Detto questo, diamo un’occhiata a come caricare, ritagliare e ridimensionare l’immagine utilizzando jQuery e PHP.<\/p>\n

Installazione<\/h3>\n

Scarica il plugin imgAreaSelect<\/a> dal link indicato. Per l’installazione di Interventon Image, consiglio di utilizzare Composer<\/a>. Eseguire il comando seguente nella directory principale del progetto per installare la libreria di immagini di intervento.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Quando hai finito assicurati che la struttura della tua directory assomigli a uno screenshot qui sotto.<\/p>\n
\"Come<\/a><\/p>\n
Come usare imgAreaSelect<\/h3>\n
Per utilizzare imgAreaSelect, dobbiamo prima includere il loro file CSS e JS insieme alla libreria jQuery.<\/p>\n
<link rel=\"stylesheet\" href=\"css\/imgareaselect.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"js\/jquery.imgareaselect.js\"><\/script><\/code><\/pre>\n
Successivamente, abbiamo bisogno di un semplice modulo in cui l’utente pu\u00f2 sfogliare l’immagine e inviarla per l’elaborazione lato server.<\/p>\n
<form action=\"crop.php\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0Upload Image: <input type=\"file\" name=\"image\" id=\"image\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"x1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"y1\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"w\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"h\" value=\"\" \/><br><br>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n\u00a0\n<p><img id=\"previewimage\" style=\"display:none;\"\/><\/p><\/code><\/pre>\n
Il modulo sopra mostrer\u00e0 l’input del file e il pulsante di invio. Ho preso i campi nascosti nel modulo che dovr\u00e0 ritagliare l’immagine sul lato server. Fondamentalmente, questi campi nascosti inviano le coordinate dell’immagine per ritagliarla.<\/p>\n
Quando l’utente sfoglia l’immagine, mostreremo l’immagine in cui un utente pu\u00f2 selezionare l’area che deve ritagliare. Il codice seguente consente all’utente di visualizzare in anteprima l’immagine e scegliere un’area dell’immagine da ritagliare.<\/p>\n
<script>\njQuery(function($) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var p = $(\"#previewimage\");\n\u00a0\u00a0\u00a0\u00a0$(\"body\").on(\"change\", \"#image\", function(){\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var imageReader = new FileReader();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.readAsDataURL(document.getElementById(\"image\").files[0]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0imageReader.onload = function (oFREvent) {\n\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};\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#previewimage').imgAreaSelect({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSelectEnd: function (img, selection) {\n\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$('input[name=\"y1\"]').val(selection.y1);\n\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$('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}\n\u00a0\u00a0\u00a0\u00a0});\n});\n<\/script><\/code><\/pre>\n
Caricamento, ritaglio e ridimensionamento sul lato server dell’immagine<\/h3>\n
Al momento dell’invio del modulo, reindirizza al crop.php<\/code>file in cui carichiamo e ritagliamo l’immagine sul lato server. Questo file accetta l’input del file e le coordinate dell’immagine per il ritaglio.<\/p>\n
Innanzitutto, includiamo l’ambiente della libreria Intervention Image.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
User\u00f2 un crop()<\/code>metodo di una libreria per creare la versione ritagliata dell’immagine originale. I parametri per la funzione crop() sono larghezza, altezza e coordinate dell’asse x e dell’asse y. Puoi leggere di pi\u00f9 a riguardo sulla loro documentazione<\/a>.<\/p>\n
crop.php<\/strong><\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;\n\u00a0\nif(isset($_POST['submit'])) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0if(isset($_FILES['image']['name']) && !empty($_FILES['image']['name'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('images', 0755);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = $_FILES['image']['name'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filepath = 'images\/'. $filename;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['image']['tmp_name'], $filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!file_exists('images\/crop')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir('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($filepath);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$croppath = 'images\/crop\/'. $filename;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->crop($_POST['w'], $_POST['h'], $_POST['x1'], $_POST['y1']);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($croppath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"<img src='\". $croppath .\"' \/>\";\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Questo \u00e8 tutto! Ora, se provi il flusso, otterrai la versione originale e ritagliata delle immagini archiviate rispettivamente nelle directory "images" e "crop".<\/p>\n
Imposta la larghezza massima sull’immagine<\/h3>\n
A volte, l’utente potrebbe voler definire la larghezza massima per le versioni ritagliate di un’immagine. 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 per impostare la larghezza massima per l’immagine.<\/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
Spero che tu capisca come caricare, ritagliare e ridimensionare l’immagine usando jQuery e PHP. Mi piacerebbe conoscere i tuoi pensieri nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n