Hablamos sobre procesamiento de imágenes con CamanJS para ajustar diversas características de imágenes que es necesario en algunos proyectos de programación de nuestro día a día, acompáñanos a ver este sencillo ejemplo de esta librería JavaScript.
CamanJS es una librería de manipulación de imágenes creada con JavaScript.
Nos permite ajustar diversas características de imágenes como brillo, contraste, saturación, exposición, ruido, etc.
El día de hoy vamos a crear un pequeño ejemplo para demostrar su uso.

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.
UdemyHaremos una interfaz que permite seleccionar una imagen.
Posteriormente ajustaremos un poco la saturación y el contraste para mostrarla en un canvas.
Lo primero que necesitamos es obtener la librería en nuestro código:
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
En nuestro código HTMl vamos a necesitar un selector de archivo y un area de canvas:
<h1>Procesamiento de imagenes con Caman JS</h1> <p>Selecciona una imagen:</p> <input type="file" id="image-input"> <canvas id="canvas"></canvas>
Ahora vamos a lo importante y vemos el código javascript encargado de hacer funcionar este pequeño proyecto:
// Obtener elementos HTML const imageInput = document.getElementById("image-input"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // Función para cargar y procesar la imagen function processImage() { // Crear un objeto CamanJS con la imagen Caman("#canvas", imageInput.files[0], function () { // Aplicar efectos artísticos this.revert(); // Deshacer cualquier efecto anterior this.saturation(-50); this.contrast(10); this.render(); // Renderizar la imagen procesada en el canvas }); } // Añadir evento de cambio al input de la imagen imageInput.addEventListener("change", function () { if (imageInput.files && imageInput.files[0]) { // Crear un objeto FileReader para leer la imagen const reader = new FileReader(); // Función que se ejecuta cuando se carga la imagen reader.onload = function (event) { // Crear un objeto de imagen HTML y establecer su fuente const img = new Image(); img.src = event.target.result; // Función que se ejecuta cuando la imagen se carga img.onload = function () { // Establecer el tamaño del canvas al tamaño de la imagen canvas.width = img.width; canvas.height = img.height; // Dibujar la imagen en el canvas ctx.drawImage(img, 0, 0, img.width, img.height); // Procesar la imagen con efectos artísticos processImage(); }; }; // Leer la imagen como un objeto de datos URL reader.readAsDataURL(imageInput.files[0]); } });
Como puedes ver la parte encargada de manipular la imagen es relativamente sencilla.
Únicamente mandamos llamar el método correspondiente a la acción que queremos aplicar y le pasamos el parámetro deseado.
Tenemos también el evento encargado de escuchar al selector de archivos y mandar a procesar la imagen.
Podemos encontrar más opciones en la página oficial de CamanJS para que te des una vuelta por allá.
Si esta información sobre procesamiento de imágenes con CamanJS te ha sido de utilidad entonces no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada con este tema, será un placer poder ayudarte.
¡Hasta luego!