Bibliothèque JavaScript Open Source pour le traitement d'images

API JavaScript pour appliquer différents effets aux images à l'aide de différents types de filtres tels que gaussien, niveaux de gris, passe-haut, inverse, laplacien, miroir, RVB, Roberts, saturation, etc.

Lena.js est une bibliothèque de traitement d'image très simple et légère qui permet aux développeurs de logiciels de travailler avec différents types d'images à partir de leurs applications JavaScript. Il s'agit d'une bibliothèque JavaScript pure qui peut fonctionner sur Node ainsi que dans le navigateur sans aucune dépendance externe. La bibliothèque est open source et est disponible sous licence MIT. La bibliothèque n'est pas très bonne avec des images lourdes à l'intérieur du navigateur mais est très efficace pour la manipulation de petites images.

Lena.js est très facile à utiliser et peut appliquer différents effets aux images. Les filtres d'images permettent aux logiciels d'appliquer différents effets sur les images avec un seul clic. La bibliothèque a apporté son soutien à plusieurs filtres d'images importants, certains sont russiens, gris, autoroutes, invert, laplacian, miroir, bruit, etc. La bibliothèque appuie également l'application de filtres multiples à une image. Les filtres sont entreposés dans la même variable globale LenaJS et peuvent être consultés par le ralenti en utilisant la mention de la clé ou du point.

Previous Next

Premiers pas avec LenaJs

La méthode recommandée pour installer LenaJs via NPM. Veuillez utiliser la commande suivante pour l'installer.

Installer Lena.Js via NPM

 npm install lena.js --save 

Appliquer des filtres sur l'image via JavaScript

La bibliothèque de la source ouverte Lena.js a fourni un ensemble de filtres utiles qui peuvent servir à appliquer différents types d'effets aux images dans JavaScript applications. Veuillez d'abord fournir l'adresse correcte de l'image et ensuite sélectionner le filtre à partir de la liste des filtres disponibles. Vous pouvez utiliser les méthodes filterImage et redrawCanvas pour appliquer facilement un filtre à l'image choisie. Une image et une toile seront utilisées pour appliquer le filtre.

Ajouter le filtre de bruit par 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
 

Application de plusieurs filtres sur les images

La bibliothèque Lena.js permet aux développeurs de logiciels d'appliquer plusieurs filtres sur leurs images dans leurs propres applications JavaScript. Habituellement, un seul filtre est appliqué à une image par la méthode filterImage. Pour appliquer plusieurs filtres à une image, vous devez utiliser la méthode redrawCanvas au lieu de filterImage. Vous devez passer une image déjà rendue avec un filtre comme premier argument et passer un nouveau filtre comme deuxième argument qui sera facilement ajouté à l'image.

Traitement des images via l'API JavaScript

La bibliothèque de LenaJs logiciels permet aux programmateurs d'ajouter systématiquement un filtre dans des images à l'intérieur de JavaScript. L'application de filtres avec LenaJs est assez simple, les API offrent deux façons d'ajouter des filtres; filterImage() et redrawCanvas(). Vous devez fournir une image et une toile à la méthode pour appliquer le filtre. Afin d'obtenir le filtre, vous pouvez utiliser la méthode LenaJs [nom] et l'appliquer à l'image en utilisant la méthode filterImage().

Appliquer un filtre de contraste sur les images

 
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
 
 Français