0

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>

1 respuesta 1

0

Logre solucionarlo de esta manera

// 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_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)) {
// Crear una nueva imagen a partir del archivo subido
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;
}

// Definir las dimensiones máximas deseadas
$max_width = 800;
$max_height = 400; // Cambiado a 400

// Obtener las dimensiones de la imagen original
$image_width = imagesx($image);
$image_height = imagesy($image);

// Verificar si la imagen es más pequeña que las dimensiones deseadas
if ($image_width <= $max_width && $image_height <= $max_height) {
$new_width = $image_width;
$new_height = $image_height;
} else {
// Calcular nuevas dimensiones manteniendo la proporción
$aspect_ratio = $image_width / $image_height;
$new_width = $max_width;
$new_height = $max_width / $aspect_ratio;

if ($new_height > $max_height) {
$new_height = $max_height;
$new_width = $max_height * $aspect_ratio;
}
}

// Crear una nueva imagen en blanco con las dimensiones deseadas y fondo blanco
$output_image = imagecreatetruecolor($max_width, $max_height);
$white = imagecolorallocate($output_image, 255, 255, 255);
imagefill($output_image, 0, 0, $white);

// Copiar la imagen original en el centro del fondo blanco
imagecopyresampled(
$output_image,
$image,
($max_width - $new_width) / 2,
($max_height - $new_height) / 2,
0,
0,
$new_width,
$new_height,
$image_width,
$image_height
);

// Verificar si se ha enviado datos de recorte
if ($recortar_imagen) {
// Obtener los datos de recorte de Cropper.js
$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,
($max_width - $cropped_width) / 2,
($max_height - $cropped_height) / 2,
$cropData['x'],
$cropData['y'],
$cropped_width,
$cropped_height
);
}

// Cargar el logo en el fondo blanco
$mark = imagecreatefromgif('../../imagenes/noticias/logo.gif');
$mark_width = imagesx($mark);
$mark_height = imagesy($mark);

$x = $max_width - $mark_width - 10; // 10 píxeles de margen desde la derecha
$y = $max_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($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.";
}
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.