La librería cropper.js es la versión 1.5.12 la redimensión se hace correctamente en forma proporcional, si si la imagen es mayor a 800x450 pixeles, de no adecuarse a ese tamaño imprime un fondo blanco con el logo y centra la imagen y cuando se selecciona el chekbox no hay inconveniente, hace el recortte agrega un fondo blanco con el logo, el tema es que si la imagen es menor y no esta seleccionado el chekbox la redimensiona y distorsiona el ancho cuando no tuviera que hacerlo, y no puedo encontrar la solución espero me puedan ayudar a resolver este problema, hace días que estoy dando vuelta con esto sin poder encontrar una solución, saludos a todos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subir Imagen</title>
<?php include("../includes/css.php"); ?>
<script src="https://kit.fontawesome.com/971a9aabac.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/cropper.min.css" />
<!-- JavaScript para configurar Cropper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../js/cropper.min.js"></script>
<link rel="shortcut icon" href="../imagenes/favicon.ico" type="image/x-icon" />
</head>
<body>
<?php
// Verificar si se ha enviado el formulario
if (isset($_POST['enviado']) && $_POST['enviado'] == 'form1') {
$recortar_imagen = isset($_POST['recortar_imagen']) ? $_POST['recortar_imagen'] : 0;
// Verificar si se ha subido una imagen
if (isset($_FILES['userfile']) && $_FILES['userfile']['error'] == 0) {
$image_info = getimagesize($_FILES['userfile']['tmp_name']);
$image_width = $image_info[0];
$image_height = $image_info[1];
$image_type = $image_info[2];
$allowed_types = array(IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_WEBP);
// Validar el tipo de imagen
if (in_array($image_type, $allowed_types)) {
// Definir las dimensiones máximas deseadas
$max_width = 800;
$max_height = 450;
// No redimensionar la imagen si es menor que las dimensiones máximas y no se selecciona recortar
if ($image_width <= $max_width && $image_height <= $max_height && !$recortar_imagen) {
// No se redimensiona la imagen
$upload_dir = "../../imagenes/noticias/";
$filename = time() . "." . pathinfo($_FILES['userfile']['name'], PATHINFO_EXTENSION);
$filepath = $upload_dir . $filename;
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $filepath)) {
// Subida exitosa
} else {
echo "Error al subir el archivo.";
exit;
}
} else {
// Redimensionar la imagen solo si es más grande que las dimensiones máximas o se selecciona recortar
if ($image_width > $max_width || $image_height > $max_height || $recortar_imagen) {
// Calcular nuevas dimensiones manteniendo la proporción
$aspect_ratio = $image_width / $image_height;
$new_width = $max_width;
$new_height = $max_height;
if ($aspect_ratio > 1) {
$new_width = $max_width;
$new_height = $new_width / $aspect_ratio;
} else {
$new_height = $max_height;
$new_width = $new_height * $aspect_ratio;
}
} else {
// No es necesario redimensionar
$new_width = $image_width;
$new_height = $image_height;
}
// Crear una nueva imagen en blanco con las dimensiones deseadas y fondo blanco
$output_image = imagecreatetruecolor($new_width, $new_height);
$white = imagecolorallocate($output_image, 255, 255, 255);
imagefill($output_image, 0, 0, $white);
// Cargar la imagen original
switch ($image_type) {
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($_FILES['userfile']['tmp_name']);
break;
case IMAGETYPE_PNG:
$image = imagecreatefrompng($_FILES['userfile']['tmp_name']);
break;
case IMAGETYPE_WEBP:
$image = imagecreatefromwebp($_FILES['userfile']['tmp_name']);
break;
}
if ($recortar_imagen) {
// Si se selecciona recortar, aplicar recorte
$cropData = json_decode($_POST['cropData'], true);
$cropped_width = $cropData['width'];
$cropped_height = $cropData['height'];
// Copiar la imagen recortada en el centro del fondo blanco
imagecopy(
$output_image,
$image,
($new_width - $cropped_width) / 2,
($new_height - $cropped_height) / 2,
$cropData['x'],
$cropData['y'],
$cropped_width,
$cropped_height
);
} else {
// Copiar la imagen original en el centro del fondo blanco
imagecopyresampled(
$output_image,
$image,
0,
0,
0,
0,
$new_width,
$new_height,
$image_width,
$image_height
);
}
// Cargar el logo en el fondo blanco
$mark = imagecreatefromgif('../../imagenes/noticias/logo.gif');
$mark_width = imagesx($mark);
$mark_height = imagesy($mark);
$x = $new_width - $mark_width - 10; // 10 píxeles de margen desde la derecha
$y = $new_height - $mark_height - 10; // 10 píxeles de margen desde la parte inferior
imagecopy($output_image, $mark, $x, $y, 0, 0, $mark_width, $mark_height);
// Guardar la imagen procesada en el servidor.
$upload_dir = "../../imagenes/noticias/";
$filename = time() . "." . pathinfo($_FILES['userfile']['name'], PATHINFO_EXTENSION);
$filepath = $upload_dir . $filename;
// Verificar que la extensión del archivo sea una de las permitidas.
$allowed_extensions = array('jpg', 'jpeg', 'png', 'webp');
$file_extension = strtolower(pathinfo($_FILES['userfile']['name'], PATHINFO_EXTENSION));
if (!in_array($file_extension, $allowed_extensions)) {
echo "Error: el formato del archivo no es válido.";
exit;
}
// Guardar la imagen procesada en el servidor con la extensión correcta.
switch ($file_extension) {
case 'jpg':
case 'jpeg':
imagejpeg($output_image, $filepath);
break;
case 'png':
imagepng($output_image, $filepath);
break;
case 'webp':
imagewebp($output_image, $filepath);
break;
}
imagedestroy($output_image);
imagedestroy($mark);
?>
<script>
opener.document.form1.strImagen.value = "<?php echo $filename; ?>";
self.close();
</script>
<?php
}
} else {
echo "Error: Tipo de imagen no válido.";
}
} else {
echo "Error: No se pudo subir el archivo.";
}
}
?>
<form action="miscript.php" method="post" enctype="multipart/form-data" id="form1">
<label class="input-group-btn">
<span class="btn btn-success btn3d">
Seleccionar archivo <i class="fa fa-folder-open-o" aria-hidden="true"></i>
<input name="userfile" id="userfile" type="file" style="display: none;" onchange="mostrarImagen(event);">
</span>
</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" name="recortar_imagen" id="recortar_imagen">
<label class="form-check-label" for="recortar_imagen">Recortar Imagen</label>
</div>
<div class="form-group">
<button type="submit" class="input-group-addon btn btn-success btn-md btn-md btn3d" id="button"
title="Subir Imagen">
<i class="fa fa-upload mr-3"></i> <i class="fa fa-picture-o fa-lg" aria-hidden="true"></i>
</button>
</div>
<input type="hidden" id="cropData" name="cropData">
<input type="hidden" name="enviado" value="form1">
</form>
<!-- HTML para la vista previa de la imagen y el área de recorte -->
<img id="image" width="100px" src="" alt="Vista previa de la imagen" style="display: none;">
<div id="cropper-container" style="display: none;">
<img id="cropper-image" width="500px" src="" alt="Área de recorte">
<div class="pt-1 text-center">
<button id="rotate-left" class="btn btn-primary"><i class="fa fa-arrow-left"></i></button>
<button id="rotate-right" class="btn btn-primary"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
<script>
var cropper;
document.getElementById('button').addEventListener('click', function () {
var recortarCheckbox = document.getElementById('recortar_imagen');
if (recortarCheckbox.checked) {
var cropData = cropper.getData();
document.getElementById('cropData').value = JSON.stringify(cropData);
}
});
document.getElementById('rotate-left').addEventListener('click', function () {
cropper.rotate(-45);
var canvasData = cropper.getCanvasData();
cropper.setCanvasData({
left: canvasData.left,
top: canvasData.top,
width: canvasData.height,
height: canvasData.width
});
});
document.getElementById('rotate-right').addEventListener('click', function () {
cropper.rotate(45);
var canvasData = cropper.getCanvasData();
cropper.setCanvasData({
left: canvasData.left,
top: canvasData.top,
width: canvasData.height,
height: canvasData.width
});
});
function mostrarImagen(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var img = document.getElementById('image');
var recortarCheckbox = document.getElementById('recortar_imagen');
if (recortarCheckbox.checked) {
img.style.display = 'none';
var cropperContainer = document.getElementById('cropper-container');
var cropperImage = document.getElementById('cropper-image');
cropperContainer.style.display = 'block';
var base64Image = event.target.result;
cropperImage.src = base64Image;
cropper = new Cropper(cropperImage, {
aspectRatio: 16 / 9,
viewMode: 1,
autoCropArea: 0.8,
background: false,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
ready: function () {
cropper.setAspectRatio(16 / 9);
cropper.setCropBoxData({ left: 0, top: 0, width: 800, height: 450 });
cropper.options.cropend = function (e) {
var canvas = cropper.getCroppedCanvas();
var dataURL = canvas.toDataURL();
img.src = dataURL;
};
}
});
} else {
img.style.display = 'block';
img.src = event.target.result;
var cropperContainer = document.getElementById('cropper-container');
cropperContainer.style.display = 'none';
}
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>