Biblioteca JavaScript de código abierto para el procesamiento de imágenes
API de JavaScript para aplicar diferentes efectos a las imágenes usando diferentes tipos de filtros como gaussiano, escala de grises, paso alto, inversión, laplaciano, espejo, RGB, Roberts, saturación y más.
Lena.js es una biblioteca de procesamiento de imágenes muy simple y liviana que permite a los desarrolladores de software trabajar con diferentes tipos de imágenes desde el interior de sus aplicaciones de JavaScript. Es una biblioteca de JavaScript puro que puede funcionar tanto en Node como en el navegador sin dependencias externas. La biblioteca es de código abierto y está disponible bajo la licencia MIT. La biblioteca no es muy buena con imágenes pesadas dentro del navegador, pero es muy eficiente para la manipulación de imágenes pequeñas.
Lena.js es muy fácil de usar y puede aplicar diferentes efectos a las imágenes. Los filtros de imagen permiten que las aplicaciones de software apliquen diferentes efectos en las imágenes con solo un clic. La biblioteca ha incluido soporte para varios filtros de imagen importantes, algunos importantes son gaussiano, escala de grises, paso alto, inversión, laplaciano, espejo, ruido, Prewitt, RGB, Roberts, saturación, sepia, nitidez y muchos más. La biblioteca también admite la aplicación de múltiples filtros a una imagen. Los filtros se almacenan en la misma variable global LenaJS y se puede acceder a ellos a través de su id usando la notación de clave o punto.
Primeros pasos con LenaJs
La forma recomendada de instalar LenaJs a través de NPM. Utilice el siguiente comando para instalarlo.
Instalar Lena.Js a través de NPM
npm install lena.js --save Aplicar filtros en la imagen a través de JavaScript
La biblioteca de código abierto Lena.js ha proporcionado un conjunto de filtros útiles que se pueden usar para aplicar diferentes tipos de efectos a las imágenes dentro de las aplicaciones de JavaScript. Primero proporcione la dirección correcta de la imagen y luego seleccione el filtro de la lista de filtros disponibles. Puede usar los métodos filterImage y redrawCanvas para aplicar fácilmente un filtro a la imagen seleccionada. Se utilizará una imagen y un lienzo para aplicar el filtro.
Añadir Noise Filter a través de JavaScript
const noise = function (pixels, amount = 0) {
const level = amount * 255 * 0.1
let random;
for (let i = 0; i < pixels.data.length; i += 4) {
random = (0.5 - Math.random()) * level;
pixels.data[i] += random;
pixels.data[i + 1] += random;
pixels.data[i + 2] += random;
}
return pixels
}
export default noise
Aplicar filtros múltiples en imágenes
La biblioteca Lena.js permite a los desarrolladores de software aplicar múltiples filtros en sus imágenes dentro de sus propias aplicaciones de JavaScript. Por lo general, se aplica un solo filtro a una imagen mediante el método filterImage. Para aplicar varios filtros a una imagen, debe usar el método redrawCanvas en lugar de filterImage. Debe pasar una imagen ya renderizada con un filtro como primer argumento y necesita pasar un nuevo filtro como segundo argumento que se agregará a la imagen con facilidad.
Procesamiento de imágenes a través de la API de JavaScript
La biblioteca LenaJs brinda a los programadores de software la capacidad de agregar mediante programación un filtro en las imágenes dentro de JavaScript. Aplicar filtros con LenaJs es bastante simple, la API proporciona dos formas de agregar filtros; filterImage() y redrawCanvas(). Debe proporcionar una imagen y un lienzo al método para aplicar el filtro. Para obtener el filtro, puede usar el método LenaJs['filername'] y aplicarlo a la imagen usando el método filterImage().
Aplicar filtro de contraste sobre imágenes
const contrast = function (pixels, amount) {
const level = Math.pow((amount + 100) / 100, 2)
let data = pixels.data
let r
let g
let b
for (let i = 0; i < data.length; i += 4) {
r = data[i]
g = data[i + 1]
b = data[i + 2]
r = r / 255
r -= 0.5
r *= level
r += 0.5
r *= 255
g = g / 255
g -= 0.5
g *= level
g += 0.5
g *= 255
b = b / 255
b -= 0.5
b *= level
b += 0.5
b *= 255
r = r < 0 ? 0 : r > 255 ? 255 : r
g = g < 0 ? 0 : g > 255 ? 255 : g
b = b < 0 ? 0 : b > 255 ? 255 : b
data[i] = r
data[i + 1] = g
data[i + 2] = b
}
return pixels
}
export default contrast
