Recortar imagen usando PHP y guardar en MySQL. Si buscas recortar una imagen has llegado a la mejor publicación. En esta publicación, vamos a aprender cómo recortar una imagen usando el complemento Croppie. Por lo tanto, después de que la imagen recortada se haya insertado en la base de datos MySQL usando el script PHP con Ajax y Bootstrap modal.
Ventajas de almacenar una imagen en MySQL
Hay un beneficio al almacenar la imagen en la base de datos, entonces se cargará más rápido que la carga de la imagen desde la carpeta.
La imagen que se almacena en la base de datos no se almacena en caché en el navegador, mientras que la carga de imágenes desde la carpeta se ha almacenado fácilmente en caché en el navegador.
Procesos de ejecución del script
Ahora veremos todo el proceso de recortar la imagen y almacenarla en la base de datos MySQL.
Al cargar la página se mostrará un formulario HTML y cuando seleccionamos la imagen por primera vez, el complemento Croppie se ha inicializado y, al usar este complemento, podemos hacer zoom en la imagen y, según nuestros requisitos, podemos recortar la imagen.
Luego, al presionar el botón la imagen ha sido recortada, este complemento ha convertido la imagen recortada en formato de cadena binaria. Al usar la función base64_decode(), decodificamos la cadena binaria en la imagen, y al usar file_put_contents(), creamos en la carpeta local.
Después de ejecutar, inserte la consulta y almacene en la base de datos. Una vez que la imagen recortada se haya almacenado en la base de datos mediante el uso de la función unlink(), también se eliminará de la carpeta local.
Este es todo el proceso de recorte de imagen y guardar en la base de datos MySQL mediante el uso del complemento JavaScript croppie con PHP y Ajax. A continuación, puede encontrar el código fuente completo de este tutorial.
Recortar imagen usando PHP: Estructura
Aquí detallaremos la estructura de archivos que contiene el presente script de recortar imagen con PHP
recortar_imagen
|
├─── js
| |
| ├─ bootstrap.min.js
| ├─ croppie.js
| ├─ jquery.min.js
| ├─ sweetalert2.all.js
|
├─── css
| |
| ├─ bootstrap.min.css
| └─ croppie.css
|
├─ buscar.php
├─ db.php
├─ insertar.php
└─ index.php1) Tabla de MySQL
En esta tabla almacenaremos el registro de la imagen, es decir la ID y la imagen en sí.
CREATE TABLE `tbl_images` (
`image_id` int(11) NOT NULL,
`images` longblob NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `tbl_images`
ADD PRIMARY KEY (`image_id`);
ALTER TABLE `tbl_images`
MODIFY `image_id` int(11) NOT NULL AUTO_INCREMENT;2) Formulario: index.php
Este fichero contendrá el formulario HTML con todos los componentes para poder lograr el recorte de la imagen usando librerías de JavaScript y PHP.
<!doctype html>
<html>
<head>
<title>Recorta la imagen y guárdala en la base de datos usando PHP con Ajax</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/croppie.js"></script>
<script src="js/sweetalert2.all.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/croppie.css" />
</head>
<body>
<div class="container"> <br />
<h3 align="left">Recorta la imagen y guárdala en la base de datos usando PHP con Ajax</h3>
<br />
<br />
<div class="panel panel-primary">
<div class="panel-heading">Selecciona Image</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="input-group"> <span class="input-group-btn"> <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
<input name="insert_image" id="insert_image" accept="image/*" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
</span> <span class="form-control"></span> </div>
</div>
</div>
<hr>
<br />
<div id="store_image"></div>
</div>
</div>
</div>
</body>
</html>
<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Recortar y guardar imagen</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;"><br />
<br />
<br/>
<button class="btn btn-success crop_image">Recortar y guardar</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$('#insert_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#insertimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:'insertar.php',
type:'POST',
data:{"image":response},
success:function(data){
$('#insertimageModal').modal('hide');
load_images();
swal({
position: 'top-end',
type: "success",
title: 'Imagen guardada en la base de datos',
showConfirmButton: false,
confirmButtonText: false,
timer: 1500
});
}
})
});
});
load_images();
function load_images()
{
$.ajax({
url:"buscar.php",
success:function(data)
{
$('#store_image').html(data);
}
})
}
});
</script>3) Conexión MySQL: db.php
Recordemos que estamos usando MySQL para almacenar las imágenes recortadas. Por lo tanto, necesitamos conectarnos con la base de datos usando el lenguaje PHP y el tipo de conexión PDO para darle más seguridad.
<?php
$connect = new PDO("mysql:host=localhost;dbname=recortar_image", "root", "");
?>4) Insertar imagen a MySQL: insertar.php
Básicamente esta parte es muy importante y contendrá las líneas de código para poder guardar la imagen recortada, todo este proceso a través de AJAX.
if(isset($_POST["image"]))
{
include('db.php');
$data = $_POST["image"];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents($imageName, $data);
$image_file = addslashes(file_get_contents($imageName));
$query = "INSERT INTO tbl_images(images) VALUES ('".$image_file."')";
$statement = $connect->prepare($query);
if($statement->execute())
{
echo 'Imagen guardado en base de datos';
unlink($imageName);
}
}
?>5) Buscar imagen en MYSQL: buscar.php
Usaremos clausulas relacionadas a las consultas SQL que devolverán los registros en el fichero index.php a través de Ajax. Además, si observamos las consultas hemos usado PDO que es lo más recomendado para las consultas SQL.
<?php
include('db.php');
$query = "SELECT * FROM tbl_images ORDER BY image_id DESC";
$statement = $connect->prepare($query);
$output = '<div class="row">';
if($statement->execute())
{
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '
<div class="col-md-2" style="margin-bottom:16px;">
<img src="data:image/png;base64,'.base64_encode($row['images']).'" class="img-thumbnail" />
</div>
';
}
}
$output .= '</div>';
echo $output;
?>Conclusión
En este breve articulo hemos aprendido a recortar imágenes a través de la librería JavaScript llamado croppie con PHP y MySQL. Además, hemos usado el framework Bootstrap para la interfaz del script y una ventana modal que realizara el proceso.
La imagen será almacenada en MySQL, eso nos dará lagunas ventajas que hemos detallado en el artículo.
Espero que este articulo les ayude en sus proyectos web, además les dejare el script para que puedan descargar.
