Libreria JavaScript open source per l'elaborazione delle immagini
API JavaScript per applicare diversi effetti alle immagini utilizzando diversi tipi di filtri come gaussiano, scala di grigi, passa alto, invertito, laplaciano, specchio, RGB, Roberts, saturazione e altro.
Lena.js è una libreria di elaborazione di immagini molto semplice e leggera che consente agli sviluppatori di software di lavorare con diversi tipi di immagini dall'interno delle loro applicazioni JavaScript. È una libreria JavaScript pura che può funzionare sia su Node che su browser senza dipendenze esterne. La libreria è open source ed è disponibile con licenza MIT. La libreria non è molto buona con immagini pesanti all'interno del browser ma è molto efficiente per la manipolazione di immagini di piccole dimensioni.
Lena.js è molto facile da usare e può applicare diversi effetti alle immagini. I filtri immagine consentono alle app software di applicare diversi effetti alle immagini con un solo clic. La libreria include il supporto per diversi importanti filtri immagine, alcuni importanti sono gaussiano, scala di grigi, passa alto, invertito, laplaciano, specchio, rumore, Prewitt, RGB, Roberts, saturazione, seppia, nitidezza e molti altri. La libreria supporta anche l'applicazione di più filtri a un'immagine. I filtri sono memorizzati nella stessa variabile globale LenaJS e sono accessibili tramite il relativo id utilizzando la notazione chiave o punto.
Iniziare con LenaJs
Il modo consigliato per installare LenaJs tramite NPM. Si prega di utilizzare il seguente comando per installarlo.
Installa Lena.Js tramite NPM
npm install lena.js --save Applica filtri sull'immagine tramite JavaScript
La libreria open source Lena.js ha fornito una serie di utili filtri che possono essere utilizzati per applicare diversi tipi di effetti alle immagini all'interno di applicazioni JavaScript. Per prima cosa fornire l'indirizzo corretto all'immagine e quindi selezionare il filtro dall'elenco dei filtri disponibili. Puoi utilizzare i metodi filterImage e redrawCanvas per applicare facilmente un filtro all'immagine selezionata. Verranno utilizzati un'immagine e una tela per applicare il filtro.
Aggiungere il filtro del rumore via 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
Applicazione di più filtri alle immagini
La libreria Lena.js consente agli sviluppatori di software di applicare più filtri alle loro immagini all'interno delle proprie app JavaScript. Di solito, un singolo filtro viene applicato a un'immagine tramite il metodo filterImage. Per applicare più filtri a un'immagine è necessario utilizzare il metodo redrawCanvas invece di filterImage. Devi passare un'immagine già renderizzata con un filtro come primo argomento e devi passare un nuovo filtro come secondo argomento che verrà aggiunto facilmente all'immagine.
Elaborazione di immagini tramite API JavaScript
La libreria LenaJs offre ai programmatori software la possibilità di aggiungere a livello di codice un filtro nelle immagini all'interno di JavaScript. L'applicazione di filtri con LenaJs è piuttosto semplice, l'API fornisce due modi per aggiungere filtri; filterImage() e redrawCanvas(). È necessario fornire un'immagine e una tela al metodo per applicare il filtro. Per ottenere il filtro, puoi utilizzare il metodo LenaJs['filername'] e applicarlo all'immagine usando il metodo filterImage().
Applicare il filtro di contrasto su Immagini
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
