1. Продукти
  2.   Зображення
  3.   JavaScript
  4.   LensJs
 
  

Бібліотека JavaScript з відкритим кодом для обробки зображень

JavaScript API для застосування різних ефектів до зображень за допомогою різних типів фільтрів, таких як гауссовий, відтінки сірого, високочастотний, інвертований, лапласівський, дзеркальний, RGB, Робертса, насиченість тощо.

Lena.js — це дуже проста легка бібліотека для обробки зображень, яка дозволяє розробникам програмного забезпечення працювати з різними типами зображень у своїх програмах JavaScript. Це чиста бібліотека JavaScript, яка може працювати як на Node, так і в браузері без будь-яких зовнішніх залежностей. Бібліотека є відкритим кодом і доступна за ліцензією MIT. Бібліотека не дуже добре працює з важкими зображеннями в браузері, але дуже ефективна для роботи з маленькими зображеннями.

Lena.js дуже простий у використанні та може застосовувати різні ефекти до зображень. Фільтри зображень дозволяють програмам застосовувати різні ефекти до зображень лише одним клацанням миші. Бібліотека включає підтримку кількох важливих фільтрів зображень, серед яких важливі фільтри Гауса, градації сірого, високочастотні, інвертовані, лапласівські, дзеркало, шум, Превітт, RGB, Робертс, насиченість, сепія, різкість та багато інших. Бібліотека також підтримує застосування кількох фільтрів до зображення. Фільтри зберігаються в тій самій глобальній змінній LenaJS, і до них можна отримати доступ через її ідентифікатор за допомогою ключа або крапкової нотації.

Previous Next

Початок роботи з LenaJs

Рекомендований спосіб встановлення LenaJs через NPM. Щоб установити його, скористайтеся наступною командою.

Встановіть Lena.Js через NPM

 npm install lena.js --save

Застосуйте фільтри до зображення через JavaScript

Бібліотека Lena.js з відкритим кодом надала набір корисних фільтрів, які можна використовувати для застосування різних ефектів до зображень у програмах JavaScript. Спочатку вкажіть правильну адресу зображення, а потім виберіть фільтр зі списку доступних фільтрів. Ви можете використовувати методи filterImage і redrawCanvas, щоб легко застосувати фільтр до вибраного зображення. Для застосування фільтра буде використано зображення та полотно.

Додайте фільтр шуму через 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

Застосування кількох фільтрів до зображень

Бібліотека Lena.js дозволяє розробникам програмного забезпечення застосовувати кілька фільтрів до своїх зображень у власних програмах JavaScript. Зазвичай один фільтр застосовується до зображення методом filterImage. Щоб застосувати кілька фільтрів до зображення, вам потрібно використовувати метод redrawCanvas замість filterImage. Вам потрібно передати зображення, яке вже було відрендерено з фільтром, як перший аргумент, і потрібно передати новий фільтр як другий аргумент, який буде легко додано до зображення.

Обробка зображень через JavaScript API

Бібліотека LenaJs дає програмістам можливість програмно додавати фільтр до зображень у JavaScript. Застосування фільтрів за допомогою LenaJs досить просте, API надає два способи додавання фільтрів; filterImage() і redrawCanvas(). Вам потрібно надати зображення та полотно для методу застосування фільтра. Щоб отримати фільтр, ви можете використати метод LenaJs['filername'] і застосувати його до зображення за допомогою методу filterImage().

Застосувати контрастний фільтр до зображень<

 
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
 Українська