1. Produse
  2.   Imagine
  3.   JavaScript
  4.   LensJs
 
  

Bibliotecă JavaScript open source pentru procesarea imaginilor

JavaScript API pentru aplicarea diferitelor efecte imaginilor folosind diferite tipuri de filtre, cum ar fi gaussian, greyscale, highpass, inversare, laplacian, oglindă, RGB, Roberts, saturație și multe altele.

Lena.js este o bibliotecă foarte simplă de procesare a imaginilor, care permite dezvoltatorilor de software să lucreze cu diferite tipuri de imagini din interiorul aplicațiilor lor JavaScript. Este o bibliotecă JavaScript pură care poate funcționa atât pe Node, cât și în browser, fără dependențe externe. Biblioteca este open source și este disponibilă sub licența MIT. Biblioteca nu este foarte bună cu imagini grele în interiorul browserului, dar este foarte eficientă pentru manipularea imaginilor mici.

Lena.js este foarte ușor de utilizat și poate aplica diferite efecte imaginilor. Filtrele de imagine permit aplicațiilor software să aplice diferite efecte asupra imaginilor cu un singur clic. Biblioteca a inclus suport pentru mai multe filtre de imagine importante, unele importante sunt gaussian, greyscale, highpass, inversat, laplacian, mirror, noise, Prewitt, RGB, Roberts, saturation, sepia, sharpen și multe altele. Biblioteca acceptă, de asemenea, aplicarea mai multor filtre unei imagini. Filtrele sunt stocate în aceeași variabilă globală LenaJS și pot fi accesate prin id-ul său folosind notația cheie sau punct.

Previous Next

Noțiuni introductive cu LenaJs

Modul recomandat de a instala LenaJ-uri prin NPM. Vă rugăm să utilizați următoarea comandă pentru a o instala.

Instalați Lena.Js prin NPM

 npm install lena.js --save

Aplicați filtre pe imagine prin JavaScript

Biblioteca open source Lena.js a oferit un set de filtre utile care pot fi folosite pentru a aplica diferite tipuri de efecte imaginilor din interiorul aplicațiilor JavaScript. Mai întâi vă rugăm să furnizați adresa corectă a imaginii și apoi selectați filtrul din lista de filtre disponibile. Puteți utiliza metodele filterImage și redrawCanvas pentru a aplica cu ușurință un filtru imaginii selectate. O imagine și o pânză vor fi folosite pentru a aplica filtrul.

Adăugați filtru de zgomot prin 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

Aplicarea mai multor filtre pe imagini

Biblioteca Lena.js permite dezvoltatorilor de software să aplice mai multe filtre pe imaginile lor în cadrul propriilor aplicații JavaScript. De obicei, un singur filtru este aplicat unei imagini prin metoda filterImage. Pentru a aplica mai multe filtre unei imagini, trebuie să utilizați metoda redrawCanvas în loc de filterImage. Trebuie să treceți o imagine deja redată cu un filtru ca prim argument și trebuie să treceți un nou filtru ca al doilea argument care va fi atașat la imagine cu ușurință.

Procesarea imaginilor prin API-ul JavaScript

Biblioteca LenaJs oferă programatorilor de software capacitatea de a adăuga programatic un filtru în imagini în interiorul JavaScript. Aplicarea filtrelor cu LenaJs este destul de simplă, API-ul oferă două moduri de a adăuga filtre; filterImage() și redrawCanvas(). Trebuie să furnizați o imagine și o pânză metodei de aplicare a filtrului. Pentru a obține filtrul, puteți utiliza metoda LenaJs['filername'] și o puteți aplica imaginii folosind metoda filterImage().

Aplicați filtrul de contrast pe imagini<

 
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
 Română