Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo para todos aquellos interesados en poder redimensionar imagenes (ancho y alto), además de poder comprimir su tamaño al reducir la calidad de la imagen. En las siguientes líneas veremos como se puede cambiar el tamaño, y comprimir imágenes utilizando HTML, CSS y JavaScript. La chicha de este ejemplo está hecha con JavaScript, usando canvas.
En esta herramienta, los usuarios pueden cargar una imagen y cambiar el tamaño de su ancho y alto, además de reducir su tamaño. Si en las opciones que vamos a ver disponibles, se marca la opción ‘Bloquear relación de aspecto‘, esta relación de aspecto se calculará automáticamente, y se completará de forma automática el campo a medida que comencemos a cambiar el ancho o la altura. Otra de las opciones que encontraremos disponibles será la de ‘Reducir calidad‘. La calidad de la imagen se reducirá en un 50%.
Para terminar, los usuarios podremos descargar la imagen redimensionada haciendo clic en el botón ‘Descargar imagen como JPEG’. La descarga de imágenes también se realiza con JavaScript estándar. Es interesante recordar que esta herramienta para cambiar el tamaño de la imagen está construida usando canvas de JavaScript y sus diferentes métodos, como getContext, drawImage, toDataURL, etc… Se puede cambiar el formato de la imagen descargada dentro del archivo script.js.
Redimensionar y comprimir imágenes con JavaScript
Para llevar a cabo este ejemplo para redimensionar imágenes, solo tendremos que comenzar por crear una carpeta. En ella vamos a incluir los tres archivos que vamos a necesitar para este ejemplo.
Archivo index.html
El primero de los archivos que vamos a crear, es al que llamaremos index.html. En este será en el que vamos a crear la estructura de nuestro proyecto. Dentro del archivo, no hay más que pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Redimensionar Imágenes con JavaScript</title>
<link rel="stylesheet" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="titulo">Redimensionar imágenes</div>
<div class="wrapper">
<!-- Caja para subir la imagen -->
<div class="upload-box">
<input type="file" accept="image/*" hidden>
<img src="upload-icon.svg" alt="Imagen de subida"> <!--Aquí hay que añadir un icono para mostrar en el cuadro de subida-->
<p>Busca la imagen a redimensionar</p>
</div>
<!-- Opciones sobre la imagen utilizada -->
<div class="content">
<div class="row sizes">
<div class="column width">
<label>Ancho</label>
<input type="number">
</div>
<div class="column height">
<label>Alto</label>
<input type="number">
</div>
</div>
<div class="row checkboxes">
<div class="column ratio">
<input type="checkbox" id="ratio" checked>
<label for="ratio">Bloquear la relación del aspecto</label>
</div>
<div class="column quality">
<input type="checkbox" id="quality">
<label for="quality">Reducir la calidad</label>
</div>
</div>
<button class="download-btn">Descargar la imagen como JPEG</button>
</div>
</div>
<!-- JavaScript para recortar la imagen -->
<script src="script.js" defer></script>
</body>
</html>Archivo style.css
En segundo lugar, utilizaremos el archivo style.css para dar un mejor aspecto a nuestro proyecto. Tan solo tendremos que pegar el siguiente código dentro del archivo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #4a0075;
}
.titulo {
font-size: 60px;
color: #fff;
}
.titulo {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 100px;
font: normal 48px/normal "Warnes", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-decoration: normal;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #b3009b , 0 0 70px #cc0ab2 , 0 0 80px #850273 , 0 0 100px #ff00de ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.titulo:hover {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}
.wrapper {
width: 450px;
height: 288px;
padding: 30px;
background: #fff;
border-radius: 25px;
}
.wrapper:hover{
box-shadow: 0px 0px 16px 10px #fcfcfc;
}
.wrapper.active {
height: 537px;
}
.wrapper .upload-box {
height: 225px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 15px;
border: 3px dashed #afafaf;
}
.wrapper.active .upload-box {
border: none;
}
.upload-box p {
font-size: 1.06rem;
margin-top: 20px;
}
.wrapper.active .upload-box p {
display: none;
}
.wrapper.active .upload-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
border: 1px solid #000;
}
.wrapper .content {
opacity: 0;
margin-top: 28px;
pointer-events: none;
}
.wrapper.active .content {
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.content .row {
display: flex;
justify-content: space-between;
}
.content .row .column {
width: calc(100% / 2 - 15px);
}
.row .column label {
font-size: 1.06rem;
}
.sizes .column input {
width: 100%;
height: 50px;
margin-top: 7px;
padding: 0 15px;
font-size: 1.02rem;
border-radius: 4px;
border: 1px solid #aaa;
}
.sizes .column input:focus {
padding: 0 14px;
border: 2px solid #927DFC;
}
.content .checkboxes {
margin-top: 20px;
}
.checkboxes .column {
display: flex;
align-items: center;
}
.checkboxes .column input {
width: 17px;
height: 17px;
margin-right: 9px;
accent-color: #927DFC;
}
.content .download-btn {
width: 100%;
color: #fff;
border: none;
cursor: pointer;
font-size: 1.06rem;
border-radius: 5px;
padding: 15px 0;
margin: 30px 0 10px;
background: #785dff;
text-transform: uppercase;
}
.download-btn:hover {
background: #2a00fd;
}Archivo script.js
El funcionamiento de nuestro proyecto se va a definir en el archivo script.js. Aquí, mediante canvas, cambiaremos las dimensiones de las imágenes que queramos modificar. Dentro del archivo, no habrá más que pegar el siguiente código:
// tomar valores
const uploadBox = document.querySelector(".upload-box"),
previewImg = uploadBox.querySelector("img"),
fileInput = uploadBox.querySelector("input"),
widthInput = document.querySelector(".width input"),
heightInput = document.querySelector(".height input"),
ratioInput = document.querySelector(".ratio input"),
qualityInput = document.querySelector(".quality input"),
downloadBtn = document.querySelector(".download-btn");
let ogImageRatio;
// Cargar archivo
const loadFile = (e) => {
const file = e.target.files[0]; // obtener el archivo seleccionado por el usuario
if(!file) return; // volver si el usuario no ha seleccionado ningún archivo
previewImg.src = URL.createObjectURL(file); // pasar la url del archivo seleccionado para previsualizar img src
previewImg.addEventListener("load", () => { // una vez cargado img
widthInput.value = previewImg.naturalWidth;
heightInput.value = previewImg.naturalHeight;
ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;
document.querySelector(".wrapper").classList.add("active");
});
}
widthInput.addEventListener("keyup", () => {
// obtener altura de acuerdo con el estado de la casilla de verificación de relación
const height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;
heightInput.value = Math.floor(height);
});
heightInput.addEventListener("keyup", () => {
// obtener ancho de acuerdo con el estado de la casilla de verificación de relación
const width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;
widthInput.value = Math.floor(width);
});
// Redimensionar y descargar
const resizeAndDownload = () => {
const canvas = document.createElement("canvas");
const a = document.createElement("a");
const ctx = canvas.getContext("2d");
// si la casilla de verificación de calidad está marcada, pasa 0.5 a imgQuality else pass 1.0
// 1.0 es 100% de calidad donde 0.5 es 50% del total. Se puede pasar de 0.1 - 1.0
const imgQuality = qualityInput.checked ? 0.5 : 1.0;
// establecer el alto y el ancho de canvas de acuerdo con los valores introducidos
canvas.width = widthInput.value;
canvas.height = heightInput.value;
// dibujar la imagen seleccionada por el usuario en el lienzo
ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);
// pasar la url de datos del lienzo como valor href del <a> elemento
a.href = canvas.toDataURL("image/jpeg", imgQuality);
a.download = new Date().getTime(); // pasar el tiempo actual como valor de descarga
a.click(); // haciendo clic en el <a> elemento para que el archivo se descargue
}
downloadBtn.addEventListener("click", resizeAndDownload);
fileInput.addEventListener("change", loadFile);
uploadBox.addEventListener("click", () => fileInput.click());Una vez que creados estos archivos, los guardaremos todos dentro de la carpeta que previamente hemos creado. Después solo será necesario abrir con el navegador web el archivo index.html, y veremos funcionando ya nuestro proyecto. Si quieres ver cómo funciona este redimensionador de imágenes antes de crearlo en nuestro sistema, puedes hacer clic en el siguiente enlace.
Eso es todo, ahora ha creado con éxito un proyecto sobre redimensionar y comprimir imágenes utilizando HTML, CSS y JavaScript.