{"id":28212,"date":"2021-05-22T11:15:00","date_gmt":"2021-05-22T08:15:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28212"},"modified":"2021-10-17T16:51:37","modified_gmt":"2021-10-17T13:51:37","slug":"cambiar-el-tamano-de-la-imagen-en-laravel-usando-la-biblioteca-de-imagenes-de-intervencion","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/cambiar-el-tamano-de-la-imagen-en-laravel-usando-la-biblioteca-de-imagenes-de-intervencion\/","title":{"rendered":"Cambiar el tama\u00f1o de la imagen en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n"},"content":{"rendered":"

Recientemente, uno de nuestros lectores pregunt\u00f3 c\u00f3mo cambiar el tama\u00f1o de la imagen en Laravel. El cambio de tama\u00f1o de la imagen es una tarea habitual para los desarrolladores. Los desarrolladores deber\u00edan hacerlo correctamente. Es una buena pr\u00e1ctica cambiar el tama\u00f1o de las im\u00e1genes seg\u00fan el tama\u00f1o del contenedor. Te ayuda a mejorar la velocidad de la p\u00e1gina. En este art\u00edculo, estudiamos c\u00f3mo cambiar el tama\u00f1o de la imagen en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n.<\/p>\n

La<\/a> biblioteca de im\u00e1genes de intervenci\u00f3n<\/a> proporciona una manera f\u00e1cil de cambiar el tama\u00f1o de las im\u00e1genes. Esta biblioteca utiliza GD Library e Imagick para la manipulaci\u00f3n de im\u00e1genes bajo el cap\u00f3.<\/p>\n

\u00bfPor qu\u00e9 deber\u00eda cambiar el tama\u00f1o de las im\u00e1genes?<\/h3>\n

Tomemos el ejemplo de una galer\u00eda. Mientras trabajamos en una galer\u00eda, normalmente mostramos la peque\u00f1a miniatura en la lista. Cuando alguien hace clic en la miniatura, mostramos una imagen original. Aqu\u00ed, las miniaturas son la versi\u00f3n redimensionada de la imagen original.<\/p>\n

Digamos que el tama\u00f1o de la imagen original es 500 500 y el contenedor de miniaturas es de 200 200. En este caso, debe cambiar el tama\u00f1o de la imagen original seg\u00fan el tama\u00f1o del contenedor de miniaturas. Usar una imagen de gran tama\u00f1o en un recipiente peque\u00f1o es una mala pr\u00e1ctica. Afecta el rendimiento del sitio web.<\/p>\n

Este es un ejemplo de por qu\u00e9 deber\u00edamos cambiar el tama\u00f1o de las im\u00e1genes. Hay muchos otros tambi\u00e9n. Dicho esto, echemos un vistazo a c\u00f3mo cambiar el tama\u00f1o de la imagen en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n.<\/p>\n

Instalaci\u00f3n<\/h3>\n

Para comenzar, debe instalar la biblioteca de im\u00e1genes de intervenci\u00f3n en su proyecto de Laravel. Deber\u00eda tener Composer<\/a> instalado en su sistema. 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 el proveedor de servicios de este paquete a la $providers<\/code>matriz.<\/p>\n
InterventionImageImageServiceProvider::class<\/code><\/pre>\n
A continuaci\u00f3n, agregue la fachada a la $aliases<\/code>matriz.<\/p>\n
'Image' => InterventionImageFacadesImage::class<\/code><\/pre>\n
Cambiar el tama\u00f1o de la imagen en Laravel<\/h3>\n
Para cambiar el tama\u00f1o de la imagen, primero tenemos que escribir el c\u00f3digo para cargar una imagen. As\u00ed que primero crea un directorio donde almacenaremos las im\u00e1genes. Dir\u00edgete a la terminal y ejecuta el comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Este comando crea un directorio de "almacenamiento" en la carpeta "p\u00fablica". En la carpeta ‘almacenamiento’, almacenaremos una versi\u00f3n completa y una miniatura de las im\u00e1genes.<\/p>\n
A continuaci\u00f3n, cree un formulario en su archivo de vista. Tambi\u00e9n estoy agregando c\u00f3digo para el mensaje de \u00e9xito en el archivo blade.<\/p>\n
@if (session('success'))\n\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ session('success') }}\n\u00a0\u00a0\u00a0\u00a0<\/div>\n@endif\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
Reemplaza el marcador de posici\u00f3n ‘PASS_ACTION_URL’ con tu ruta.<\/p>\n
En el controlador, es necesario agregar la fachada ‘Imagen’ de una biblioteca que hemos agregado en el config\/app.php<\/code>archivo.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse Image;\n\u00a0\nclass ImageController extends Controller\n{\n\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. Una es la imagen original en la carpeta ‘profile_images’. El segundo est\u00e1 en el directorio ‘profile_images \/ thumbnail’. Primero cargar\u00e9 la imagen original en la carpeta de miniaturas y luego la cambiar\u00e9 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\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('profile_image')->storeAs('public\/profile_images\/thumbnail', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Resize image here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thumbnailpath = public_path('storage\/profile_images\/thumbnail\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$img->save($thumbnailpath);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect('image')->with('success', \"Image uploaded successfully.\"); \/\/change the route as per your flow\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Aqu\u00ed estoy cambiando el tama\u00f1o de la imagen proporcionalmente. Al hacerlo, mantendr\u00e1 la relaci\u00f3n de aspecto y la imagen no se cortar\u00e1. He pasado el ancho como 400 y la altura como 150. Puede cambiar estos valores seg\u00fan sus necesidades.<\/p>\n
Si est\u00e1 buscando un recorte dif\u00edcil, reemplace las l\u00edneas siguientes<\/p>\n
$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {\n\u00a0\u00a0\u00a0\u00a0$constraint->aspectRatio();\n});\n$img->save($thumbnailpath);<\/code><\/pre>\n
Con<\/p>\n
$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);<\/code><\/pre>\n
Despu\u00e9s de esto, obtendr\u00e1 la miniatura con una dimensi\u00f3n de 100 * 100.<\/p>\n
Espero que aprendas a cambiar el tama\u00f1o de la imagen en Laravel usando la biblioteca de im\u00e1genes de intervenci\u00f3n. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n