{"id":28691,"date":"2021-05-30T18:21:00","date_gmt":"2021-05-30T15:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28691"},"modified":"2021-10-17T16:34:45","modified_gmt":"2021-10-17T13:34:45","slug":"como-cargar-recortar-y-cambiar-el-tamano-de-una-imagen-usando-jquery-y-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-cargar-recortar-y-cambiar-el-tamano-de-una-imagen-usando-jquery-y-php\/","title":{"rendered":"C\u00f3mo cargar, recortar y cambiar el tama\u00f1o de una imagen usando jQuery y PHP"},"content":{"rendered":"

Si est\u00e1 ejecutando un sitio web, es posible que desee recortar la imagen en ciertos escenarios. Supongamos que desea permitir que el usuario recorte sus im\u00e1genes de perfil antes de subirlas. En este art\u00edculo, estudiamos c\u00f3mo cargar, recortar y cambiar el tama\u00f1o de la imagen usando imgAreaSelect y PHP.<\/p>\n

Podemos decir que cuando recortamos la imagen, en realidad estamos cambiando su tama\u00f1o ajust\u00e1ndola con las coordenadas proporcionadas de la parte recortada.<\/p>\n

imgAreaSelect<\/a> es un complemento de jQuery que proporciona una funci\u00f3n para recortar las im\u00e1genes. Es un complemento liviano y f\u00e1cil de usar.<\/p>\n

Para comenzar, debe usar el complemento imgAreaSelect y la biblioteca de im\u00e1genes de intervenci\u00f3n<\/a>. Usando imgAreaSelect elegimos el \u00e1rea de la imagen que necesita recortar y la biblioteca de im\u00e1genes de Internention nos ayuda a almacenar la versi\u00f3n original y copiada de una imagen en el servidor.<\/p>\n

Habiendo dicho eso, echemos un vistazo a c\u00f3mo cargar, recortar y cambiar el tama\u00f1o de la imagen usando jQuery y PHP.<\/p>\n

Instalaci\u00f3n<\/h3>\n

Descargue el complemento imgAreaSelect<\/a> desde el enlace proporcionado. Para la instalaci\u00f3n de Interventon Image, recomiendo usar Composer<\/a>. Ejecute el siguiente comando en el directorio ra\u00edz del proyecto para instalar la biblioteca de im\u00e1genes de intervenci\u00f3n.<\/p>\n

composer require intervention\/image<\/code><\/pre>\n
Cuando haya terminado, aseg\u00farese de que la estructura de su directorio se vea como una captura de pantalla a continuaci\u00f3n.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
C\u00f3mo utilizar imgAreaSelect<\/h3>\n
Para usar imgAreaSelect, primero debemos incluir su archivo CSS y JS junto con la biblioteca 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
A continuaci\u00f3n, necesitamos un formulario simple en el que el usuario pueda examinar la imagen y enviarla para su procesamiento en el servidor.<\/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
El formulario anterior mostrar\u00e1 la entrada del archivo y el bot\u00f3n de env\u00edo. He tomado campos ocultos en el formulario que necesitar\u00e1n recortar la imagen en el lado del servidor. B\u00e1sicamente, estos campos ocultos env\u00edan coordenadas de la imagen para recortarla.<\/p>\n
Cuando el usuario navega por la imagen, le mostraremos la imagen donde un usuario puede seleccionar el \u00e1rea que necesita recortar. El siguiente c\u00f3digo permite al usuario obtener una vista previa de la imagen y elegir un \u00e1rea de la imagen para recortar.<\/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
Cargar, recortar y cambiar el tama\u00f1o de la imagen del lado del servidor<\/h3>\n
Tras el env\u00edo del formulario, redirige al crop.php<\/code>archivo donde cargamos y recortamos la imagen en el lado del servidor. Este archivo acepta la entrada del archivo y las coordenadas de la imagen para recortar.<\/p>\n
Primero, incluyamos el entorno de la biblioteca de im\u00e1genes de intervenci\u00f3n.<\/p>\n
<?php\nrequire 'vendor\/autoload.php';\n\u00a0\nuse InterventionImageImageManagerStatic as Image;<\/code><\/pre>\n
Voy a utilizar un crop()<\/code>m\u00e9todo de biblioteca para crear la versi\u00f3n recortada de la imagen original. Los par\u00e1metros de la funci\u00f3n crop() son el ancho, el alto y las coordenadas del eje xy del eje y. Puede leer m\u00e1s sobre esto en su documentaci\u00f3n<\/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
\u00a1Eso es! Ahora, si prueba el flujo, obtendr\u00e1 la versi\u00f3n original y recortada de las im\u00e1genes almacenadas en los directorios ‘im\u00e1genes’ y ‘recortar’ respectivamente.<\/p>\n
Establecer el ancho m\u00e1ximo en la imagen<\/h3>\n
A veces, el usuario puede querer definir el ancho m\u00e1ximo para las versiones recortadas de una imagen. 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 para establecer el ancho m\u00e1ximo de la imagen.<\/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
Espero que comprenda c\u00f3mo cargar, recortar y cambiar el tama\u00f1o de la imagen usando jQuery y PHP. Me gustar\u00eda conocer sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n