Es indispensable pensar a la hora de desarrollar aplicaciones web la optimización de recursos, en el caso de las imagenes, por lo general estas pesan demasiado y no solo pueden alcanzar un gran tamaño en el servidor, sino que tambien pueden saturar el ancho de banda con su tamaño, es por eso que lo mejor es comprimir las imagenes en el cliente antes de enviarlas al servidor, para esto existen varias herramientas, una de ellas es Compressor.js.
Compressor.js es una biblioteca para JavaScript diseñada para la compresión de imágenes directamente en el navegador, utiliza la API nativa HTMLCanvasElement.toBlob() para realizar la compresión, lo que la convierte en una solución eficiente para procesar archivos de imagen antes de subirlos. Sus principales funciones incluyen la capacidad de redimensionar imágenes, establecer la calidad de la compresión (con valores entre 0 y 1), y la opción de retener los datos EXIF.
A continuación se mostrará un ejemplo sencillo de su uso que permite seleccionar una imagen en el cliente, comprimirla y luego subirla al servidor en formato webp.
Nos creamos un archivo index.html y colocamos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprimir y subir imagen</title>
</head>
<body>
<h1>Comprimir y subir imagen</h1>
<input type="file" id="imageInput" accept="image/jpeg, image/png">
<button id="uploadButton" disabled>Subir imagen comprimida</button>
<div id="status"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.2.1/compressor.min.js"></script>
<script>
const imageInput = document.getElementById('imageInput');
const uploadButton = document.getElementById('uploadButton');
const statusDiv = document.getElementById('status');
let selectedFile = null;
imageInput.addEventListener('change', (event) => {
const files = event.target.files;
if (files.length > 0) {
selectedFile = files[0];
uploadButton.disabled = false;
statusDiv.textContent = `Selected file: ${selectedFile.name}`;
} else {
selectedFile = null;
uploadButton.disabled = true;
statusDiv.textContent = 'No file selected.';
}
});
uploadButton.addEventListener('click', () => {
if (selectedFile) {
statusDiv.textContent = 'Compressing image...';
new Compressor(selectedFile, {
quality: 0.8, // Adjust compression quality (0 to 1)
maxWidth: 9999, // mantiene el ancho original
maxHeight: 9999, // mantiene la altura original
mimeType: 'image/webp', // 'image/webp' o 'image/jpeg'
success(result) {
statusDiv.textContent = 'Compresion exitosa. Subiendo...';
uploadImage(result);
},
error(err) {
statusDiv.textContent = `La compresión fallo: ${err.message}`;
console.error(err.message);
},
});
} else {
statusDiv.textContent = 'Por favor seleccione una imagen.';
}
});
function uploadImage(compressedFile) {
const formData = new FormData();
formData.append('compressedImage', compressedFile, compressedFile.name.split('.')[0] + '.webp');
fetch('upload.php', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.success) {
statusDiv.textContent = `¡Subida exitosa! Guardado como: ${data.fileName}`;
} else {
statusDiv.textContent = `No se subio el archivo: ${data.message}`;
}
})
.catch(error => {
statusDiv.textContent = `Se produjo un error: ${error.message}`;
console.error('Error:', error);
});
}
</script>
</body>
</html>
En el lado del servidor necesitamos el archivo upload.php:
<?php
header('Content-Type: application/json');
$uploadDir = 'uploads/';
$response = ['success' => false, 'message' => 'An unknown error occurred.'];
// Si el directorio "uploads" no existe, lo creamos
if (!is_dir($uploadDir)) {
if (!mkdir($uploadDir, 0777, true)) {
$response['message'] = 'No se pudo crear directorio.';
echo json_encode($response);
exit;
}
}
//se guarda imagen
if (isset($_FILES['compressedImage']) && $_FILES['compressedImage']['error'] === UPLOAD_ERR_OK) {
$file = $_FILES['compressedImage'];
$fileExtension = pathinfo($file['name'], PATHINFO_EXTENSION);
$fileName = time() . '.' . $fileExtension;
$uploadFilePath = $uploadDir . $fileName;
if (move_uploaded_file($file['tmp_name'], $uploadFilePath)) {
$response['success'] = true;
$response['message'] = 'La imagen se guardo correctamente.';
$response['fileName'] = $fileName;
} else {
$response['message'] = 'Error al guardar la imagen.';
}
} else {
$response['message'] = 'Se produjo un erorr al subir la imagen.';
}
echo json_encode($response);
Probamos el código y tenemos:
La reducción de la imagen es considerable pero mantiene su calidad y dimensiones.
Enjoy!!!
Cuando se realizan trabajos donde se necesita mostrar al cliente un determinado monto de dinero, tipo factura, recibo, c[...]
En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley[...]
La clase hashMap es muy util para almacenar objetos de la forma ( Clave, Objeto ), donde Clave es un identificador único[...]
El Método Congruencial Lineal Mixto es el más utilizado en simulación en computadoras digitales y esta basado en una rel[...]
DOM4J es una de las librerías para java más populares para el trabajo con XML ya que nos permite crea, editar y leer doc[...]
Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d[...]
