Portada » Lenguaje PHP » Recortar imagen usando PHP y guardar en MySQL

Recortar imagen usando PHP y guardar en MySQL

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.php

1) 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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 3 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad