¿Cómo utilizar JavaScript para el filtrado y efectos de imágenes?
19/03/2024
•
5
min
Para usar JavaScript para el filtrado de imágenes y efectos, necesitas entender e implementar tres conceptos clave: HTML, CSS y JavaScript en sí mismo.
Este ejemplo te guiará a través de cómo agregar un efecto de filtro simple a una imagen usando JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 330px;
height: 220px;
}
</style>
</head>
<body>
<img id="myImage" src="your-image-source.jpg" alt="Tu imagen">
<button onclick="addFilter()">Agregar filtro</button>
<script>
function addFilter() {
var img = document.getElementById("myImage");
img.style.filter = "grayscale(100%)";
}
</script>
</body>
</html>
Este es un ejemplo básico donde tu página web muestra una imagen y un botón. Cuando se presiona el botón, se llama a la función JavaScript addFilter.
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
En esta función, recuperamos la imagen por su id ("myImage") y la asignamos a la variable img.
Luego, usamos la propiedad style.filter para agregar un filtro 'grayscale(100%)' a la imagen, lo cual convierte la imagen a blanco y negro.
Aquí te mostramos cómo agregar múltiples efectos a una imagen:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 330px;
height: 220px;
}
</style>
</head>
<body>
<img id="myImage" src="your-image-source.jpg" alt="Your image">
<button onclick="addFilter()">Agregar filtros</button>
<script>
function addFilter() {
var img = document.getElementById("myImage");
img.style.filter = "grayscale(100%) brightness(50%)";
}
</script>
</body>
</html>
En este ejemplo, hemos añadido otro efecto, brightness(50%), a la propiedad style.filter. Esto reduce el brillo de la imagen en un 50%. Los efectos se aplican de forma secuencial, es decir, primero se convierte la imagen a escala de grises y luego se reduce su brillo.
Recuerda reemplazar your-image-source.jpg con la ruta real de la imagen que deseas mostrar y manipular.
La propiedad style.filter puede soportar los siguientes tipos de efectos/operaciones:
- grayscale(%) - Convierte la imagen a escala de grises.
- sepia(%) - Convierte la imagen al tono sepia.
- saturate(%) - Satura la imagen.
- hue-rotate(deg) - Aplica una rotación de tono en la imagen.
- invert(%) - Invierte las muestras en la imagen.
- opacity(%) - Aplica transparencia a la imagen.
- brightness(%) - Ajusta el brillo de la imagen.
- contrast(%) - Ajusta el contraste de la imagen.
- blur(px) - Aplica un desenfoque a la imagen.
- drop-shadow - Aplica un efecto de sombra paralela a la imagen.
Puedes referirte a este enlace para obtener más detalles y ejemplos.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.