Nyílt forráskódú JavaScript-könyvtár képfeldolgozáshoz

JavaScript API különböző effektusok alkalmazásához a képekre különféle szűrők használatával, például Gauss, szürkeárnyalatos, felüláteresztő, invert, laplacian, tükör, RGB, Roberts, telítettség stb.

A Lena.js egy nagyon egyszerű, könnyű képfeldolgozó könyvtár, amely lehetővé teszi a szoftverfejlesztők számára, hogy különféle típusú képekkel dolgozzanak JavaScript-alkalmazásaikból. Ez egy tiszta JavaScript-könyvtár, amely külső függőségek nélkül működik a Node-on és a böngészőn belül is. A könyvtár nyílt forráskódú, és az MIT licenc alatt érhető el. A könyvtár nem túl jó a böngészőben található nehéz képekkel, de nagyon hatékony a kis képek manipulálására.

A Lena.js nagyon könnyen használható, és különféle effektusokat tud alkalmazni a képekre. A képszűrők lehetővé teszik a szoftveralkalmazások számára, hogy egyetlen kattintással különböző effektusokat alkalmazzanak a képeken. A könyvtár számos fontos képszűrőt támogat, néhány fontos közülük a Gauss, szürkeárnyalatos, felüláteresztő, invert, laplacian, tükör, zaj, Prewitt, RGB, Roberts, telítettség, szépia, élesítés és még sok más. A könyvtár több szűrő alkalmazását is támogatja egy képre. A szűrők ugyanabban a LenaJS globális változóban vannak tárolva, és az azonosítóján keresztül érhetők el a kulcs vagy pont jelöléssel.

Previous Next

A LenaJs használatának megkezdése

A LenaJs NPM-en keresztüli telepítésének ajánlott módja. Kérjük, használja a következő parancsot a telepítéshez.

Telepítse a Lena.Js-t NPM-en keresztül

 npm install lena.js --save 

Alkalmazzon szűrőket a képre JavaScripten keresztül

A nyílt forráskódú Lena.js könyvtár hasznos szűrőket kínál, amelyek segítségével különféle effektusokat lehet alkalmazni a JavaScript-alkalmazásokon belüli képekre. Először adja meg a kép helyes címét, majd válassza ki a szűrőt az elérhető szűrők listájából. A filterImage és a redrawCanvas metódusokkal egyszerűen alkalmazhat szűrőt a kiválasztott képre. A szűrő alkalmazásához egy kép és egy vászon kerül felhasználásra.

Zajszűrő hozzáadása JavaScripten keresztül

 
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
 

Több szűrő alkalmazása a képekre

A Lena.js könyvtár lehetővé teszi a szoftverfejlesztők számára, hogy több szűrőt alkalmazzanak képeikre saját JavaScript-alkalmazásaikon belül. Általában egyetlen szűrőt alkalmaznak egy képre a filterImage módszerrel. Ha több szűrőt szeretne alkalmazni egy képre, akkor a filterImage helyett a redrawCanvas módszert kell használnia. Egy szűrővel már megjelenített képet kell átadnia első argumentumként, és egy új szűrőt kell átadnia második argumentumként, amely könnyedén hozzá lesz fűzve a képhez.

Képek feldolgozása JavaScript API-n keresztül

A LenaJs könyvtár lehetővé teszi a szoftverprogramozóknak, hogy programozottan szűrőt adjanak a JavaScript-en belüli képekhez. A szűrők alkalmazása LenaJ-kkel meglehetősen egyszerű, az API kétféle lehetőséget biztosít a szűrők hozzáadására; filterImage() és redrawCanvas(). A szűrő alkalmazásához képet és vászonképet kell megadnia a módszerhez. A szűrő beszerzéséhez használhatja a LenaJs['filername'] metódust, és alkalmazhatja a képre a filterImage() metódussal.

Alkalmazzon kontrasztszűrőt a képekre<

 
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
 
 Magyar