tengo un crud de productos en el cual me gustaría subir imágenes con dimensiones exactas, para ello le agregue croppie.js, no soy programador así que hice lo que pude leyendo en blogs...todo me funciona , subo la imagen y demás, el único gran problema es que cuando por ejemplo le doy a agregar producto la imagen que sube a la carpeta es la imagen original y no la que tiene las nuevas dimensiones, por ejemplo en el código para hacer las pruebas puse que la imagen fuera de 100 x 100 , sin embargo como he dicho no funciona. si alguine me pudiera guiar para encontrar una solucion lo agradeceria.
<!-- comienza el form php -->
<form class="form" action="insert.php" role="form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Nombre" value="<?php echo $name;?>">
<span class="help-inline"><?php echo $nameError;?></span>
</div>
<div class="form-group">
<label for="description">Descripción:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Descripción" value="<?php echo $description;?>">
<span class="help-inline"><?php echo $descriptionError;?></span>
</div>
<div class="form-group">
<label for="opciones">Opciones:</label>
<input type="text" class="form-control" id="opciones" name="opciones" placeholder="Opciones" value="<?php echo $opciones;?>">
<span class="help-inline"><?php echo $descriptionError;?></span>
</div>
<div class="form-group">
<label for="price">Precio: (CRC)</label>
<input type="number" step="0.01" class="form-control" id="price" name="price" placeholder="Precio" value="<?php echo $price;?>">
<span class="help-inline"><?php echo $priceError;?></span>
</div>
<div class="form-group">
<label for="category">Categoría:</label>
<select class="form-control" id="category" name="category">
<?php
$db = Database::connect();
foreach ($db->query('SELECT * FROM categories') as $row)
{
echo '<option value="'. $row['id'] .'">'. $row['name'] . '</option>';;
}
Database::disconnect();
?>
</select>
<span class="help-inline"><?php echo $categoryError;?></span>
</div>
<div class="form-group">
<label for="image">Selecciona una imagen:</label>
<img src="" class="gambar" id="result" />
<input type="file" class="item-img file" id="image" name="image">
<span class="help-inline"><?php echo $imageError;?></span>
</div>
<br>
<div class="form-actions">
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Agregar</button>
<a class="btn btn-primary" href="index.php"><span class="glyphicon glyphicon-arrow-left"></span> Regresar</a>
</div>
</form>
<!-- termina el form php -->
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
</h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crear</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://foliotek.github.io/Croppie/croppie.js"></script> -->
<script>
var c = new Croppie(document.getElementById('item'), opts);
// call a method
c.method(args);
</script>
<script>
// Start upload preview image
$(".gambar").attr("src", "template/img/logo/logo.jpg");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
} else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 400,
height: 267,
},
boundary: {
width: 400,
height: 300
},
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function() {
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function() {
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function() {
imageId = $(this).data('id');
tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId);
readFile(this);
});
$('#cropImageBtn').on('click', function(ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {
width: 100,
height: 100
}
}).then(function(resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
</script>
</body> ```
Aca el php
``` <?php
require 'database.php';
$nameError = $descriptionError = $priceError = $categoryError = $imageError = $name = $description = $opciones = $price = $category = $image = "";
if(!empty($_POST))
{
$name = checkInput($_POST['name']);
$description = checkInput($_POST['description']);
$opciones = checkInput($_POST['opciones']);
$price = checkInput($_POST['price']);
$category = checkInput($_POST['category']);
$image = checkInput($_FILES["image"]["name"]);
$imagePath = '../images/'. basename($image);
$imageExtension = pathinfo($imagePath,PATHINFO_EXTENSION);
$isSuccess = true;
$isUploadSuccess = false;
if(empty($name))
{
$nameError = 'Este campo no puede estar vacío';
$isSuccess = false;
}
if(empty($description))
{
$descriptionError = 'Este campo no puede estar vacío';
$isSuccess = false;
}
if(empty($price))
{
$priceError = 'Este campo no puede estar vacío';
$isSuccess = false;
}
if(empty($category))
{
$categoryError = 'Este campo no puede estar vacío';
$isSuccess = false;
}
if(empty($image))
{
$imageError = 'Este campo no puede estar vacío';
$isSuccess = false;
}
else
{
$isUploadSuccess = true;
if($imageExtension != "jpg" && $imageExtension != "png" && $imageExtension != "jpeg" && $imageExtension != "gif" )
{
$imageError = "Los archivos permitidos son: .jpg, .jpeg, .png, .gif";
$isUploadSuccess = false;
}
if(file_exists($imagePath))
{
$imageError = "El archivo ya existe";
$isUploadSuccess = false;
}
if($_FILES["image"]["size"] > 500000)
{
$imageError = "El archivo no debe exceder el 500 KB";
$isUploadSuccess = false;
}
if($isUploadSuccess)
{
if(!move_uploaded_file($_FILES["image"]["tmp_name"], $imagePath))
{
$imageError = "Se ha producido un error al subir el archivo";
$isUploadSuccess = false;
}
}
}
if($isSuccess && $isUploadSuccess)
{
$db = Database::connect();
$statement = $db->prepare("INSERT INTO items (name,description,opciones,price,category,image) values(?, ?, ?, ?, ?, ?)");
$statement->execute(array($name,$description,$opciones,$price,$category,$image));
Database::disconnect();
header("Location: index.php");
}
}
function checkInput($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?> ```