{"id":28372,"date":"2021-05-25T10:59:00","date_gmt":"2021-05-25T07:59:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28372"},"modified":"2021-10-17T16:46:32","modified_gmt":"2021-10-17T13:46:32","slug":"cree-una-miniatura-en-laravel-usando-la-biblioteca-de-imagenes-de-intervencion","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/cree-una-miniatura-en-laravel-usando-la-biblioteca-de-imagenes-de-intervencion\/","title":{"rendered":"Cree una miniatura en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n"},"content":{"rendered":"

En el sitio web, siempre nos ocupamos de las im\u00e1genes. Seg\u00fan el requisito, utilizamos diferentes versiones de im\u00e1genes. Es una buena pr\u00e1ctica para los desarrolladores crear diferentes versiones, tambi\u00e9n conocidas como miniaturas de la imagen \u00fanica. Estas miniaturas se pueden utilizar mientras se muestran diferentes tama\u00f1os de im\u00e1genes seg\u00fan el tama\u00f1o del contenedor. Mostrar una imagen que se ajuste al tama\u00f1o del contenedor ahorrar\u00e1 ancho de banda y mejorar\u00e1 el tiempo de carga de la p\u00e1gina. Mostrar una imagen de gran tama\u00f1o en un contenedor peque\u00f1o es una mala pr\u00e1ctica y compromete el tiempo de carga de la p\u00e1gina. Como resultado, se recomienda crear varias miniaturas de una imagen y usar la versi\u00f3n adecuada cuando sea necesario.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo crear una miniatura en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n. Intervention Image<\/a> es gratuito y una de las bibliotecas m\u00e1s populares para la manipulaci\u00f3n de im\u00e1genes. En segundo plano, esta biblioteca utiliza GD Library e Imagick para la manipulaci\u00f3n de im\u00e1genes.<\/p>\n

Para este tutorial, crear\u00e9 3 miniaturas: peque\u00f1a, mediana, grande con tama\u00f1os 150 93, 300 * 185, 550 340 respectivamente. Cambie estos tama\u00f1os seg\u00fan sus necesidades.<\/p>\n

Empezando<\/h3>\n

Para comenzar, primero debe instalar la biblioteca de im\u00e1genes de intervenci\u00f3n en Laravel. Abra la terminal en el directorio ra\u00edz de su proyecto y ejecute el siguiente comando:<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Despu\u00e9s de instalar la biblioteca, abra el config\/app.php<\/code>archivo y agregue las siguientes l\u00edneas.<\/p>\n
Agregue los proveedores de servicios para este paquete en la $providers<\/code>matriz.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
Agregue la fachada a la $aliases<\/code>matriz.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
A continuaci\u00f3n, para almacenar las im\u00e1genes necesitamos crear un directorio. Dir\u00edgete a la terminal y ejecuta el comando de la siguiente manera:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Este comando crea un directorio de almacenamiento (enlace simb\u00f3lico) en la carpeta p\u00fablica. En esta carpeta, subir\u00e9 la imagen original y sus miniaturas.<\/p>\n
Crea una miniatura en Laravel<\/h3>\n
Todos configuramos la configuraci\u00f3n b\u00e1sica y ahora podemos escribir el c\u00f3digo real. Creemos un formulario en su archivo de vista.<\/p>\n
<form action=\"{{ url('PASS_ACTION_URL') }}\" 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
En el controlador, debe agregar la fachada de la biblioteca ‘Imagen’ que hemos agregado en el config\/app.php<\/code>archivo.<\/p>\n
<?php\n\u00a0\u00a0\nnamespace AppHttpControllers;\n\u00a0\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\u00a0\nclass ImageController extends Controller\n{\n\u00a0\u00a0\n}<\/code><\/pre>\n
Al agregar la fachada, podemos llamar a funciones de la biblioteca de im\u00e1genes de intervenci\u00f3n. En el siguiente c\u00f3digo, subir\u00e9 la imagen en dos lugares. La imagen original va directamente dentro de la storage\/profile_images<\/code>carpeta. Las miniaturas se almacenar\u00edan en el storage\/profile_images\/thumbnail<\/code>directorio. Primero cargamos la imagen original en la carpeta de miniaturas y luego la cambiamos de tama\u00f1o.<\/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\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\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\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\/\/small thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnail = $filename.'_small_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/medium thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnail = $filename.'_medium_'.time().'.'.$extension;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/large thumbnail name\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnail = $filename.'_large_'.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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $largethumbnail);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create small thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$smallthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$smallthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($smallthumbnailpath, 150, 93);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create medium thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$mediumthumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$mediumthumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($mediumthumbnailpath, 300, 185);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/create large thumbnail\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$largethumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$largethumbnail);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->createThumbnail($largethumbnailpath, 550, 340);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\");\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
En el c\u00f3digo anterior, almaceno la imagen con 3 formatos peque\u00f1o, mediano y grande. Despu\u00e9s de almacenarlos, estamos llamando al m\u00e9todo createThumbnail<\/code>y pasando el ancho y alto requeridos al m\u00e9todo. Definamos esta funci\u00f3n a continuaci\u00f3n. Esta funci\u00f3n deber\u00eda ir al mismo controlador.<\/p>\n
\/**\n\u00a0* Create a thumbnail of specified size\n\u00a0*\n\u00a0* @param string $path path of thumbnail\n\u00a0* @param int $width\n\u00a0* @param int $height\n\u00a0*\/\npublic function createThumbnail($path, $width, $height)\n{\n\u00a0\u00a0\u00a0\u00a0$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0$img->save($path);\n}<\/code><\/pre>\n
Aqu\u00ed estamos cambiando el tama\u00f1o de la imagen proporcionalmente. Al hacerlo, mantenemos la relaci\u00f3n de aspecto y la imagen no se cortar\u00e1.<\/p>\n
Si est\u00e1 buscando un cultivo duro, reemplace las l\u00edneas siguientes<\/p>\n
$img = Image::make($path)->resize($width, $height, function ($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($path);<\/code><\/pre>\n
Con<\/p>\n
$img = Image::make($path)->resize($width, $height)->save($path);<\/code><\/pre>\n
Espero que entiendas c\u00f3mo crear una miniatura en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n. Me gustar\u00eda escuchar sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n