{"id":28404,"date":"2021-05-25T13:40:00","date_gmt":"2021-05-25T10:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28404"},"modified":"2021-10-17T16:45:36","modified_gmt":"2021-10-17T13:45:36","slug":"como-cargar-y-recortar-una-imagen-en-laravel-usando-imgareaselect-y-la-biblioteca-de-imagenes-de-intervencion","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-cargar-y-recortar-una-imagen-en-laravel-usando-imgareaselect-y-la-biblioteca-de-imagenes-de-intervencion\/","title":{"rendered":"C\u00f3mo cargar y recortar una imagen en Laravel usando imgAreaSelect y la biblioteca de im\u00e1genes de intervenci\u00f3n"},"content":{"rendered":"

Recientemente, uno de nuestros lectores pidi\u00f3 escribir un art\u00edculo sobre subir y recortar im\u00e1genes en Laravel. En el pasado, publiqu\u00e9 el art\u00edculo sobre el mismo tema para cargar , recortar y cambiar el tama\u00f1o de la imagen en PHP<\/a>. Pero cuando se trata de Laravel, necesitamos hacer modificaciones seg\u00fan los est\u00e1ndares de Laravel. En este art\u00edculo, estudiamos c\u00f3mo cargar y recortar im\u00e1genes en Laravel.<\/p>\n

Para este tutorial, usar\u00e9 2 bibliotecas: imgAreaSelect e Intervention Image.<\/p>\n

imgAreaSelect<\/a> es un complemento de jQuery que permite recortar im\u00e1genes seleccionando un \u00e1rea rectangular de una imagen. Es un complemento liviano y f\u00e1cil de usar.<\/p>\n

Por otro lado, Intervention Image<\/a> es una biblioteca de manejo y manipulaci\u00f3n de im\u00e1genes. Esta biblioteca nos ayuda a crear, editar y componer im\u00e1genes en el lado del servidor.<\/p>\n

En este tutorial, usar\u00e9 imgAreaSelect para obtener las coordenadas de la imagen recortada y la biblioteca de im\u00e1genes de intervenci\u00f3n para recortar la imagen en el lado del servidor seg\u00fan las coordenadas.<\/p>\n

Empezando<\/h3>\n

Para comenzar, deber\u00eda haber instalado Laravel. Si a\u00fan no lo ha creado, inst\u00e1lelo a trav\u00e9s del comando:<\/p>\n

composer create-project --prefer-dist laravel\/laravel laravel-dev<\/code><\/pre>\n
El comando anterior configurar\u00e1 el proyecto de Laravel llamado ‘laravel-dev’ para usted.<\/p>\n
A continuaci\u00f3n, instale la biblioteca de im\u00e1genes de Intervenci\u00f3n en su proyecto de Laravel. Ejecute el siguiente comando desde el directorio ra\u00edz del proyecto.<\/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
Finalmente, descargue el complemento imgAreaSelect<\/a>. Desde el zip descargado, copie im\u00e1genes, CSS, archivo JS y p\u00e9guelo en la carpeta p\u00fablica del proyecto Laravel. B\u00e1sicamente, su estructura deber\u00eda ser como la siguiente captura de pantalla.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
C\u00f3mo utilizar imgAreaSelect<\/h3>\n
Como vamos a usar CSS y JS del complemento imgAreaSelect, construyamos una estructura para \u00e9l. Cree un resources\/views\/layouts\/app.blade.php<\/code>archivo y agregue el c\u00f3digo a continuaci\u00f3n.<\/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
Este archivo act\u00faa como un archivo com\u00fan para todos los blades. Usando los marcadores de posici\u00f3n (@yield<\/code>), uno puede colocar el c\u00f3digo en el archivo blade en los lugares respectivos como en el encabezado, pie de p\u00e1gina, etc.<\/p>\n
Cree un image.blade.php<\/code>archivo dentro del resources\/views<\/code>directorio. Este archivo blade tendr\u00e1 el siguiente c\u00f3digo.<\/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
Usted puede haber notado algunas cosas desde el archivo anterior como @extends('layouts.app')<\/code>, @section('style')<\/code>, @section('content')<\/code>, etc. Estas secciones se destinar\u00e1n en los lugares respectivos de app.blade.php<\/code>. El usuario puede tener una mejor idea cuando ve el c\u00f3digo fuente de esta p\u00e1gina en el navegador.<\/p>\n
Para llamar a esta vista, cree un controlador usando el comando:<\/p>\n
php artisan make:controller ImageController --resource<\/code><\/pre>\n
Agregue la referencia de este controlador en el archivo de ruta.<\/p>\n
rutas \/ web.php<\/strong><\/p>\n
Route::resource('image', 'ImageController');<\/code><\/pre>\n
Abra el ‘ImageController’ en el editor y al m\u00e9todo ‘index’ llame al archivo de vista.<\/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
Ejecute el php artisan serve<\/code>comando y podr\u00e1 ver su formulario en la siguiente URL.<\/p>\n
http:\/\/localhost:8000\/image<\/code><\/pre>\n
Cuando cargue la imagen, deber\u00eda ver la imagen de vista previa debajo del formulario. Desde esta vista previa, puede seleccionar una parte de la imagen que desea recortar.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Cargar y recortar im\u00e1genes mediante la biblioteca de im\u00e1genes de intervenci\u00f3n<\/h3>\n
En este punto, nos completamos con el c\u00f3digo del lado del cliente donde el usuario puede elegir una parte de la imagen que desea recortar. El siguiente trabajo es recortar la imagen y almacenarla en el servidor. Para almacenar una imagen en un servidor, usar\u00e9 la funci\u00f3n de almacenamiento de Laravel donde creamos un enlace simb\u00f3lico de una carpeta de ‘almacenamiento’. Para crear un enlace simb\u00f3lico, ejecute el comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Este comando crea un directorio de "almacenamiento" en la carpeta "p\u00fablica".<\/p>\n
En nuestro controlador ya incluimos una fachada, use Image;<\/code>por lo que est\u00e1 listo para usar la biblioteca de im\u00e1genes de Intervenci\u00f3n para recortar la imagen en el lado del servidor. El store()<\/code>m\u00e9todo del controlador debe tener un c\u00f3digo como el siguiente:<\/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
En este c\u00f3digo, estamos almacenando una versi\u00f3n recortada de una imagen en el directorio ‘public \/ storage \/ profile_images \/ crop’. Despu\u00e9s de almacenarlo, estamos pasando una ruta de la imagen recortada a la vista. Y en el archivo de vista, ya agregamos un c\u00f3digo que muestra la imagen recortada al usuario final.<\/p>\n
Establecer el ancho m\u00e1ximo en la imagen<\/h3>\n
A veces, los usuarios pueden querer definir el ancho m\u00e1ximo para la versi\u00f3n recortada de una imagen. El complemento imgAreaSelect proporciona varias opciones como aspectRatio, maxWidth, maxHeight, etc. para personalizar el resultado final de una imagen. Un usuario puede usar la opci\u00f3n maxWidth cambiando el c\u00f3digo JavaScript de la siguiente manera:<\/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
Se trata de c\u00f3mo cargar y recortar im\u00e1genes en Laravel. Espero que sepas c\u00f3mo manejar la tarea de recortar im\u00e1genes. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n