1. Товары
  2.   Изображение
  3.   JavaScript
  4.   LensJs
 
  

Библиотека JavaScript с открытым исходным кодом для обработки изображений

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

Lena.js — это очень простая и легкая библиотека для обработки изображений, которая позволяет разработчикам программного обеспечения работать с различными типами изображений из своих приложений JavaScript. Это чистая библиотека JavaScript, которая может работать как в узле, так и в браузере без каких-либо внешних зависимостей. Библиотека имеет открытый исходный код и доступна по лицензии 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
 Русский