Cargar y recortar imágenes usando PHP y jQuery. En un ejemplo anterior, vimos como recortar imágenes usando el lenguaje jQuery usando la librería Jcrop. Sin embargo, en ese artículo solo hemos trabajado en una imagen existente en el servidor.
Ahora viendo que todos los sistemas son dinámicos hemos optado en crear un formulario HTML para cargar las imágenes. Por lo tanto, empezaremos a detallar que vamos a implementar para que este código funcione correctamente.
Cargar y recortar imágenes usando PHP y jQuery
Básicamente, lo que tenemos que hacer es fusionar un script para cargar imágenes y el recortador de imágenes jQuery, a continuación detallaremos lo que necesitamos:
- Usaremos HTML. Lo usaremos para generar un formulario.
- Lenguaje PHP: Este lenguaje es para subir las imágenes al servidor.
- JQuery. Para realizar los recortes a medida, según la selección del usuario.
- jQuery. Genera una interfaz limpia y amigable.
- Jcrop. Librería jQuery para realizar recortes.
¿Cómo funciona el sistema? Descripción lógica.
Cuando el sistema carga mostrara una imagen por defecto en el cual el usuario puede seleccionar y generar el recorte. Adicional a esto, en este ejemplo hemos añadido un formulario para cargar imágenes según preferencia del usuario.
Por lo tanto, un formulario con la opción de carga de archivos se utiliza para elegir el archivo de imagen y cargar el archivo apoyados con el código php que será enviada a una carpeta predeterminada con nombre «imagenes».
Una vez cargada la imagen se podrá seleccionar de manera dinámica y realizar el recorte de manera cotidiana.
En el archivo php llamado «ImagenRecortada.php«, los datos de la matriz $ _FILES se reciben y el archivo cargado se desplaza al destino especificado. Si la subida es correcta, se mostrara la vista previa de la imagen y ya podemos realizar recortes con la imagen de la vista previa.
Formulario HTML con opción de carga de imágenes
Nos servirá para crear un formulario HTML que permitirá al usuario seleccionar y cargar la imagen.
Fichero index.php
<?php
if (! empty($_POST["cargar"])) {
if (is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$targetPath = "imagenes/" . $_FILES['userImage']['name'];
if (move_uploaded_file($_FILES['userImage']['tmp_name'], $targetPath)) {
$uploadedImagePath = $targetPath;
}
}
}
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Cargar y recortar imágenes usando PHP y jQuery - BaulPHP</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Cargar y recortar imágenes usando PHP y jQuery</h3>
<hr>
<div class="row">
<div class="col-12 col-md-12">
<!-- Contenido -->
<?php
$imagePath = "imagenes/ImgOriginal.jpg";
if (! empty($uploadedImagePath)) {
$imagePath = $uploadedImagePath;
}
?>
<div class="alert alert-primary" role="alert">
<form id="uploadForm" action="" method="post" enctype="multipart/form-data" class="form-inline">
<div class="form-group mb-2">
<input class="form-control-file" name="userImage" id="userImage" type="file">
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="submit" name="cargar" class="btn btn-primary" value="Cargar Imagen">
</div>
</form>
</div>
<form class="form-inline">
<div class="form-group mb-2">
<ul class="list-group">
<li class="list-group-item">
<div><img src="<?php echo $imagePath; ?>" id="RecortarImagen" class="img" /><br />
</div>
</li>
</ul>
</div>
<div class="form-group mb-2" style="padding:20px;">
<input class="btn btn-primary" type='button' id="recortar" value='Recortar Imagen'>
</div>
</form>
<div class="form-inline">
<div class="form-group mb-2">
<ul class="list-group">
<li class="list-group-item">
<div><img src="#" id="imgrecortada_img" style="display: none;"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var size;
$('#RecortarImagen').Jcrop({
aspectRatio: 1,
onSelect: function(c){
size = {x:c.x,y:c.y,w:c.w,h:c.h};
$("#recortar").css("visibility", "visible");
$("#descargar").css("visibility", "visible");
}
});
$("#recortar").click(function(){
var img = $("#RecortarImagen").attr('src');
$("#imgrecortada_img").show();
$("#descargar").show();
$("#imgrecortada_img").attr('src','ImagenRecortada.php?x='+size.x+'&y='+size.y+'&w='+size.w+'&h='+size.h+'&img='+img);
});
});
</script>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin row -->
</div>
<!-- Fin container -->
<footer class="footer">
<div class="container"> <span class="text-muted">
<p>Códigos <a href="https://baulphp.com/" target="_blank">BaulPHP</a></p>
</span> </div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>Cargar y recortar imágenes – Salida en el navegador
La siguiente captura de pantalla muestra la salida de este ejemplo para crear la carga de imágenes de php para habilitar la función de recorte en la imagen cargada.
CONCLUSIÓN
Como verán, el uso de esta herramienta está presente en la mayoría de sistemas web, que son muy populares en internet. Nos referimos a facebook.com, Google, WordPress, entre otras tecnologías globales.
Su uso es muy recomendado y su curva de implementación es muy baja. Les recomiendo que prueben y modifiquen según sus necesidades.
DESCARGA
Les dejare un link para que descarguen el ejemplo completo de este artículo.
[sociallocker id=»5099″] Descargar [/sociallocker]
Buena tarde amigo como podria asignarle un nombre especifico a la imagen recortada y como podria saberlo tras hacer funcionar el script, debido a que no me deja ingresarle mas variables por get a imagenRecortada.php