Open Source JavaScript-bibliotek til billedbehandling

JavaScript API til anvendelse af forskellige effekter på billeder ved hjælp af forskellige slags filtre såsom gaussian, gråtoner, highpass, invert, laplacian, mirror, RGB, Roberts, saturation og mere.

Lena.js er et meget enkelt letvægts billedbehandlingsbibliotek, der gør det muligt for softwareudviklere at arbejde med forskellige typer billeder inde fra deres JavaScript-applikationer. Det er et rent JavaScript-bibliotek, der kan fungere på Node såvel som i browseren uden nogen eksterne afhængigheder. Biblioteket er open source og er tilgængeligt under MIT-licensen. Biblioteket er ikke særlig godt med tunge billeder inde i browseren, men er meget effektivt til manipulation af små billeder.

Lena.js er meget nem at bruge og kan anvende forskellige effekter på billeder. Billedfiltrene gør det muligt for software-apps at anvende forskellige effekter på billeder med blot et enkelt klik. Biblioteket har inkluderet understøttelse af flere vigtige billedfiltre, nogle vigtige er gaussian, gråtoner, highpass, invert, laplacian, spejl, støj, Prewitt, RGB, Roberts, saturation, sepia, skarphed og mange flere. Biblioteket understøtter også anvendelse af flere filtre på et billede. Filtrene er gemt i den samme globale variabel LenaJS og kan tilgås via dens id ved hjælp af nøglen eller punktnotationen.

Previous Next

Kom godt i gang med LenaJs

Den anbefalede måde at installere LenaJs på via NPM. Brug venligst følgende kommando til at installere det.

Installer Lena.Js via NPM

 npm install lena.js --save 

Anvend filtre på billedet via JavaScript

Open source Lena.js-biblioteket har leveret et sæt nyttige filtre, der kan bruges til at anvende forskellige slags effekter på billeder i JavaScript-applikationer. Angiv først den korrekte adresse til billedet og vælg derefter filteret fra listen over tilgængelige filtre. Du kan bruge metoderne filterImage og redrawCanvas til nemt at anvende et filter på det valgte billede. Et billede og et lærred vil blive brugt til at anvende filteret.

Tilføj støjfilter 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
 

Anvendelse af flere filtre på billeder

Lena.js-biblioteket gør det muligt for softwareudviklere at anvende flere filtre på deres billeder i deres egne JavaScript-apps. Normalt anvendes et enkelt filter på et billede efter filterImage-metoden. For at anvende flere filtre på et billede skal du bruge metoden redrawCanvas i stedet for filterImage. Du skal sende et billede, der allerede er gengivet med et filter som det første argument, og du skal sende et nyt filter som et andet argument, som nemt vil blive tilføjet billedet.

Behandling af billeder via JavaScript API

LenaJs-biblioteket giver softwareprogrammører mulighed for programmæssigt at tilføje et filter i billeder inde i JavaScript. Det er ret simpelt at anvende filtre med LenaJs, API'en giver to måder at tilføje filtre på; filterImage() og redrawCanvas(). Du skal levere et billede og et lærred til metoden for at anvende filteret. For at få filteret kan du bruge LenaJs['filernavn']-metoden og anvende den på billedet ved hjælp af filterImage()-metoden.

Anvend kontrastfilter på billeder<

 
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
 
 Dansk