1. Produkty
  2.   Obraz
  3.   JavaScript
  4.   LensJs
 
  

Biblioteka Open Source JavaScript do przetwarzania obrazu

Interfejs API JavaScript do stosowania różnych efektów do obrazów przy użyciu różnych rodzajów filtrów, takich jak gaussowski, skala szarości, górnoprzepustowy, odwrócony, laplacjański, lustrzany, RGB, Roberts, nasycenie i inne.

Lena.js to bardzo prosta, lekka biblioteka do przetwarzania obrazów, która umożliwia programistom pracę z różnymi typami obrazów z poziomu ich aplikacji JavaScript. Jest to czysta biblioteka JavaScript, która może pracować zarówno w węźle, jak iw przeglądarce bez żadnych zewnętrznych zależności. Biblioteka jest open source i jest dostępna na licencji MIT. Biblioteka nie jest zbyt dobra z ciężkimi obrazami w przeglądarce, ale jest bardzo wydajna do manipulowania małymi obrazami.

Lena.js jest bardzo łatwy w użyciu i może nakładać różne efekty na obrazy. Filtry obrazu umożliwiają aplikacjom stosowanie różnych efektów na obrazach za pomocą jednego kliknięcia. Biblioteka zawiera obsługę kilku ważnych filtrów obrazu, niektóre z nich to Gaussa, skala szarości, górnoprzepustowy, odwrócony, laplacjan, lustro, szum, Prewitt, RGB, Roberts, nasycenie, sepia, wyostrzenie i wiele innych. Biblioteka obsługuje również stosowanie wielu filtrów do obrazu. Filtry są przechowywane w tej samej zmiennej globalnej LenaJS i można uzyskać do nich dostęp poprzez jej id za pomocą notacji z kluczem lub kropką.

Previous Next

Pierwsze kroki z LenaJs

Zalecany sposób instalacji LenaJs przez NPM. Użyj następującego polecenia, aby go zainstalować.

Zainstaluj Lena.Js przez NPM

 npm install lena.js --save

Zastosuj filtry do obrazu za pomocą JavaScript

Biblioteka Lena.js o otwartym kodzie źródłowym zawiera zestaw przydatnych filtrów, których można używać do stosowania różnego rodzaju efektów do obrazów w aplikacjach JavaScript. Najpierw podaj poprawny adres do obrazka, a następnie wybierz filtr z listy dostępnych filtrów. Możesz użyć metod filterImage i redrawCanvas, aby łatwo zastosować filtr do wybranego obrazu. Do zastosowania filtra zostanie użyty obraz i płótno.

Dodaj filtr szumów za pomocą 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

Stosowanie wielu filtrów na obrazach

Biblioteka Lena.js umożliwia programistom stosowanie wielu filtrów na swoich obrazach w ich własnych aplikacjach JavaScript. Zwykle jeden filtr jest nakładany na obraz za pomocą metody filterImage. Aby zastosować wiele filtrów do obrazu, musisz użyć metody redrawCanvas zamiast filterImage. Musisz przekazać obraz już wyrenderowany z filtrem jako pierwszy argument i musisz przekazać nowy filtr jako drugi argument, który zostanie dołączony do obrazu z łatwością.

Przetwarzanie obrazów przez JavaScript API

Biblioteka LenaJs daje programistom możliwość programowego dodawania filtrów do obrazów wewnątrz JavaScript. Stosowanie filtrów za pomocą LenaJs jest dość proste, API zapewnia dwa sposoby dodawania filtrów; filterImage() i redrawCanvas(). Aby zastosować filtr, musisz podać obraz i płótno. Aby uzyskać filtr, możesz użyć metody LenaJs['filername'] i zastosować ją do obrazu za pomocą metody filterImage().

Zastosuj filtr kontrastu do obrazów<

 
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
 Polski