JavaScript библиотека с отворен код за обработка на изображения

JavaScript API за прилагане на различни ефекти към изображения с помощта на различни видове филтри като gaussian, grayscale, highpass, invert, laplacian, mirror,RGB, Roberts, saturation и други.

Lena.js е много проста лека библиотека за обработка на изображения, която позволява на разработчиците на софтуер да работят с различни типове изображения от своите JavaScript приложения. Това е чиста JavaScript библиотека, която може да работи на Node, както и в браузъра, без никакви външни зависимости. Библиотеката е с отворен код и се предлага под лиценза на MIT. Библиотеката не е много добра с тежки изображения в браузъра, но е много ефективна за манипулиране на малки изображения.

Lena.js е много лесен за използване и може да прилага различни ефекти към изображения. Филтрите за изображения позволяват на софтуерните приложения да прилагат различни ефекти върху изображения само с едно щракване. Библиотеката включва поддръжка за няколко важни филтъра за изображения, някои важни са гаус, скала на сивото, високочестотен, инвертиран, лапласиан, огледало, шум, Prewitt, RGB, Roberts, насищане, сепия, изостряне и много други. Библиотеката също поддържа прилагане на множество филтри към изображение. Филтрите се съхраняват в една и съща глобална променлива 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
 
 Български