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.

Haremos 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!

Clic para valorar esta información

[Total: 3 Promedio: 5]

Procesamiento de Imágenes con CamanJS

jonathan__melgoza