1. Producten
  2.   Afbeelding
  3.   JavaScript
  4.   LensJs
 
  

Open Source JavaScript-bibliotheek voor beeldverwerking

JavaScript-API voor het toepassen van verschillende effecten op afbeeldingen met behulp van verschillende soorten filters, zoals gaussiaans, grijswaarden, highpass, invert, laplacian, mirror, RGB, Roberts, verzadiging en meer.

Lena.js is een zeer eenvoudige lichtgewicht beeldverwerkingsbibliotheek waarmee softwareontwikkelaars met verschillende soorten afbeeldingen kunnen werken vanuit hun JavaScript-applicaties. Het is een pure JavaScript-bibliotheek die zowel op Node als in de browser kan werken zonder externe afhankelijkheden. De bibliotheek is open source en is beschikbaar onder de MIT-licentie. De bibliotheek is niet erg goed met zware afbeeldingen in de browser, maar is zeer efficiënt voor het manipuleren van kleine afbeeldingen.

Lena.js is heel gemakkelijk te gebruiken en kan verschillende effecten op afbeeldingen toepassen. Met de afbeeldingsfilters kunnen software-apps met slechts één klik verschillende effecten op afbeeldingen toepassen. De bibliotheek heeft ondersteuning voor verschillende belangrijke beeldfilters, enkele belangrijke zijn gaussiaans, grijswaarden, highpass, invert, laplacian, mirror, noise, Prewitt, RGB, Roberts, verzadiging, sepia, verscherpen en nog veel meer. De bibliotheek ondersteunt ook het toepassen van meerdere filters op een afbeelding. De filters worden opgeslagen in dezelfde globale variabele LenaJS en zijn toegankelijk via de id met behulp van de sleutel- of puntnotatie.

Previous Next

Aan de slag met LenaJs

De aanbevolen manier om LenaJs via NPM te installeren. Gebruik de volgende opdracht om het te installeren.

Installeer Lena.Js via NPM

 npm install lena.js --save

Filters toepassen op afbeelding via JavaScript

De open source Lena.js-bibliotheek heeft een reeks handige filters geleverd die kunnen worden gebruikt om verschillende soorten effecten toe te passen op afbeeldingen in JavaScript-toepassingen. Geef eerst het juiste adres voor de afbeelding op en selecteer vervolgens het filter uit de lijst met beschikbare filters. U kunt de methoden filterImage en redrawCanvas gebruiken om eenvoudig een filter op de geselecteerde afbeelding toe te passen. Een afbeelding en een canvas worden gebruikt om het filter toe te passen.

Add Noise Filter via 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

Meerdere filters toepassen op afbeeldingen

Met de Lena.js-bibliotheek kunnen softwareontwikkelaars meerdere filters toepassen op hun afbeeldingen in hun eigen JavaScript-apps. Gewoonlijk wordt een enkel filter toegepast op een afbeelding door de filterImage-methode. Om meerdere filters op een afbeelding toe te passen, moet u de methode redrawCanvas gebruiken in plaats van filterImage. U moet een afbeelding doorgeven die al met een filter is weergegeven als het eerste argument en u moet een nieuw filter als een tweede argument doorgeven dat met gemak aan de afbeelding zal worden toegevoegd.

Afbeeldingen verwerken via JavaScript API

De LenaJs-bibliotheek geeft softwareprogrammeurs de mogelijkheid om programmatisch een filter toe te voegen aan afbeeldingen in JavaScript. Filters toepassen met LenaJs is vrij eenvoudig, de API biedt twee manieren om filters toe te voegen; filterImage() en redrawCanvas(). U moet een afbeelding en een canvas opgeven voor de methode om het filter toe te passen. Om het filter te krijgen, kunt u de LenaJs['filername']-methode gebruiken en deze op de afbeelding toepassen met de filterImage()-methode.

Vraag Contrast Filter op Image

 
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
 Dutch