{"id":25096,"date":"2021-05-31T15:27:00","date_gmt":"2021-05-31T12:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25096"},"modified":"2021-10-18T02:10:05","modified_gmt":"2021-10-17T23:10:05","slug":"comment-telecharger-et-compresser-des-images-dans-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-telecharger-et-compresser-des-images-dans-laravel\/","title":{"rendered":"Comment t\u00e9l\u00e9charger et compresser des images dans Laravel"},"content":{"rendered":"

Vous cherchez comment t\u00e9l\u00e9charger et compresser des images dans Laravel? Laravel fournit un moyen facile de t\u00e9l\u00e9charger des fichiers. Et compresser les images au moment du t\u00e9l\u00e9chargement est une bonne pratique. Dans cet article, je vous montre comment t\u00e9l\u00e9charger et compresser des images dans Laravel.<\/p>\n

Pourquoi avoir besoin de compresser des images ?<\/h3>\n

Les images jouent un r\u00f4le important dans votre site Web. Les images ajoutent une meilleure exp\u00e9rience utilisateur et une exp\u00e9rience accrocheuse pour les visiteurs. Mais en m\u00eame temps, cela peut \u00e9galement tuer les performances du site. Les images lourdes ralentissent le site. En cons\u00e9quence, votre site prend beaucoup de temps \u00e0 charger. Les utilisateurs n’aiment pas les sites Web lents. Si votre site met plus de temps \u00e0 se charger, il y a de fortes chances que vous perdiez votre audience. Le temps de chargement standard d’un site Web est de 2 secondes. Vous devez veiller \u00e0 ce que votre site se charge dans les 2 secondes.<\/p>\n

Bien qu’il y ait plusieurs facteurs qui doivent \u00eatre pris en consid\u00e9ration afin d’am\u00e9liorer la vitesse de la page, l’un d’eux est l’utilisation d’images optimis\u00e9es. La compression d’images r\u00e9duit la taille de votre image originale sans perdre sa qualit\u00e9. Cela aide \u00e0 augmenter la vitesse du site.<\/p>\n

Cela dit, voyons comment t\u00e9l\u00e9charger et compresser des images dans Laravel.<\/p>\n

T\u00e9l\u00e9charger des images dans Laravel<\/h3>\n

Laravel fournit un moyen propre de t\u00e9l\u00e9charger les images. Pour commencer, nous devons d’abord cr\u00e9er un r\u00e9pertoire o\u00f9 nous stockerons les images. Ouvrez votre invite de commande dans le r\u00e9pertoire racine et ex\u00e9cutez la commande ci-dessous.<\/p>\n

php artisan storage:link<\/code><\/pre>\n
Cette commande cr\u00e9e un r\u00e9pertoire \u00ab\u00a0stockage\u00a0\u00bb dans le dossier \u00ab\u00a0public\u00a0\u00bb.<\/p>\n
Ensuite, cr\u00e9ez un formulaire avec le bouton de saisie et de soumission du fichier en ajoutant le code ci-dessous dans votre fichier blade.<\/p>\n
<form action=\"{{ url('ROUTE_HERE') }}\" method=\"post\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleInputFile\">File input<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" name=\"profile_image\" id=\"exampleInputFile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n<\/form><\/code><\/pre>\n
Dans le code HTML ci-dessus, j’ai ajout\u00e9 un fichier d’entr\u00e9e avec le nom ‘profile_image’. J’ai \u00e9galement ajout\u00e9 {{ csrf_field() }}<\/code>ce qui est n\u00e9cessaire pour soumettre des formulaires Laravel.<\/p>\n
Maintenant, en supposant que vous envoyez la demande de publication \u00e0 la store()<\/code>m\u00e9thode de votre contr\u00f4leur, \u00e9crivez un code qui stocke l’image sur le serveur comme ci-dessous.<\/p>\n
public 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\u00a0\/\/Compress Image Code Here\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Ce code cr\u00e9e un nom de fichier unique et stocke le fichier dans le r\u00e9pertoire ‘profile_images’. Laravel g\u00e9n\u00e8re automatiquement un r\u00e9pertoire ‘profile_images’ sous ‘public\/storage’ s’il n’existe pas.<\/p>\n
Comme dit pr\u00e9c\u00e9demment, il est pr\u00e9f\u00e9rable d’optimiser l’image au moment du t\u00e9l\u00e9chargement. Nous avons termin\u00e9 avec le code de t\u00e9l\u00e9chargement d’une image. Maintenant, nous devons le compresser. Je vais couvrir 2 services \u2013 TinyPNG<\/a> et reSmush.it<\/a> qui fournit les API pour compresser les images \u00e0 la vol\u00e9e. Voyons-les un par un.<\/p>\n
Compresser des images avec TinyPNG dans Laravel<\/h3>\n
Pour compresser des images \u00e0 l’aide de l’API TinyPNG, vous devez obtenir votre cl\u00e9 API<\/a>. Le processus est simple. Enregistrez votre adresse e-mail avec eux et ils vous enverront votre cl\u00e9 de d\u00e9veloppeur.<\/p>\n
Une fois que vous obtenez la cl\u00e9 API, ajoutez-la dans le .env<\/code>fichier.<\/p>\n
Apr\u00e8s cela, installez un package TinyPNG \u00e0 l’aide de la commande\u00a0:<\/p>\n
composer require tinify\/tinify<\/code><\/pre>\n
Lors de l’installation du package, nous devons \u00e9crire un code qui compresse l’image t\u00e9l\u00e9charg\u00e9e \u00e0 l’aide de TinyPNG.<\/p>\n
\u00c9crivez un code de compression juste en dessous de la ligne qui t\u00e9l\u00e9charge l’image.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n\u00a0\ntry {\n\u00a0\u00a0\u00a0\u00a0TinifysetKey(env(\"TINIFY_API_KEY\"));\n\u00a0\u00a0\u00a0\u00a0$source = TinifyfromFile($filepath);\n\u00a0\u00a0\u00a0\u00a0$source->toFile($filepath);\n} catch(TinifyAccountException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Verify your API key and account limit.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyClientException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Check your source image and request options.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyServerException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Temporary issue with the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(TinifyConnectionException $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ A network connection error occurred.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\/\/ Something else went wrong, unrelated to the Tinify API.\n\u00a0\u00a0\u00a0\u00a0return redirect('ROUTE_HERE')->with('error', $e->getMessage());\n}<\/code><\/pre>\n
Le code ci-dessus prend une image du r\u00e9pertoire t\u00e9l\u00e9charg\u00e9, l’envoie au serveur TinyPNG pour compression, et apr\u00e8s avoir re\u00e7u une r\u00e9ponse, stocke l’image compress\u00e9e dans le m\u00eame r\u00e9pertoire.<\/p>\n
Ce processus s’ex\u00e9cute en arri\u00e8re-plan. Vous n’avez pas \u00e0 vous soucier de la fa\u00e7on dont l’image va au serveur TinyPNG, de la fa\u00e7on dont elle re\u00e7oit la r\u00e9ponse de l’API. La biblioth\u00e8que TinyPNG effectue toutes les t\u00e2ches pour vous.<\/p>\n
Essayez de t\u00e9l\u00e9charger l’image maintenant et vous devriez voir votre image se compresser.<\/p>\n
Compresser des images \u00e0 l’aide de reSmush.it dans Laravel<\/h3>\n
TinyPNG fonctionne bien mais il a une limite d’optimisation de 500 images gratuites par mois. Si vous souhaitez compresser plus de 500 images, vous devez les payer. Alternativement, les utilisateurs peuvent choisir un service gratuit de reSmush.it pour la compression d’images. Au moment de la r\u00e9daction de cet article, reSmush.it compresse plus de 7 milliards d’images. Cela suffit \u00e0 dire sur la popularit\u00e9 de ce service.<\/p>\n
Alors, \u00e9crivez le code ci-dessous qui compresse les images en utilisant reSmush.it dans Laravel.<\/p>\n
\/\/Compress Image Code Here\n$filepath = public_path('storage\/profile_images\/'.$filenametostore);\n$mime = mime_content_type($filepath);\n$output = new CURLFile($filepath, $mime, $filenametostore);\n$data = [\"files\" => $output];\n\u00a0\n$ch = curl_init();\ncurl_setopt($ch, CURLOPT_URL, 'http:\/\/api.resmush.it\/?qlty=80');\ncurl_setopt($ch, CURLOPT_POST,1);\ncurl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);\ncurl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);\ncurl_setopt($ch, CURLOPT_POSTFIELDS, $data);\n$result = curl_exec($ch);\nif (curl_errno($ch)) {\n\u00a0\u00a0\u00a0\u00a0$result = curl_error($ch);\n}\ncurl_close ($ch);\n\u00a0\n$arr_result = json_decode($result);\n\u00a0\n\/\/ store the optimized version of the image\n$ch = curl_init($arr_result->dest);\n$fp = fopen($filepath, 'wb');\ncurl_setopt($ch, CURLOPT_FILE, $fp);\ncurl_setopt($ch, CURLOPT_HEADER, 0);\ncurl_exec($ch);\ncurl_close($ch);\nfclose($fp);<\/code><\/pre>\n
J’ai pass\u00e9 la valeur de qualit\u00e9 \u00e0 80 ?qlty=80<\/code>dans le code ci-dessus. Vous pouvez jouer en passant diff\u00e9rentes valeurs de qualit\u00e9.<\/p>\n
J’esp\u00e8re que vous comprenez comment t\u00e9l\u00e9charger et compresser des images dans Laravel. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n