1. Προϊόντα
  2.   Εικόνα
  3.   JavaScript
  4.   LensJs
 
  

Βιβλιοθήκη JavaScript ανοιχτού κώδικα για επεξεργασία εικόνας

JavaScript API για εφαρμογή διαφορετικών εφέ σε εικόνες χρησιμοποιώντας διαφορετικά είδη φίλτρων όπως gaussian, grayscale, highpass, invert, laplacian, mirror,RGB, Roberts, saturation και άλλα.

Το Lena.js είναι μια πολύ απλή βιβλιοθήκη επεξεργασίας εικόνας με μικρό βάρος που επιτρέπει στους προγραμματιστές λογισμικού να εργάζονται με διαφορετικούς τύπους εικόνων μέσα από τις εφαρμογές τους JavaScript. Είναι μια καθαρή βιβλιοθήκη JavaScript που μπορεί να λειτουργήσει τόσο στο Node όσο και στο πρόγραμμα περιήγησης χωρίς εξωτερικές εξαρτήσεις. Η βιβλιοθήκη είναι ανοιχτού κώδικα και διατίθεται με άδεια MIT. Η βιβλιοθήκη δεν είναι πολύ καλή με βαριές εικόνες μέσα στο πρόγραμμα περιήγησης, αλλά είναι πολύ αποτελεσματική για το χειρισμό μικρών εικόνων.

Το Lena.js είναι πολύ εύκολο στη χρήση και μπορεί να εφαρμόσει διαφορετικά εφέ σε εικόνες. Τα φίλτρα εικόνας επιτρέπουν στις εφαρμογές λογισμικού να εφαρμόζουν διαφορετικά εφέ σε εικόνες με ένα μόνο κλικ. Η βιβλιοθήκη περιλαμβάνει υποστήριξη για πολλά σημαντικά φίλτρα εικόνας, μερικά σημαντικά είναι τα gaussian, greyscale, highpass, invert, laplacian, mirror, noise, Prewitt, RGB, Roberts, saturation, sepia, sharpen και πολλά άλλα. Η βιβλιοθήκη υποστηρίζει επίσης την εφαρμογή πολλαπλών φίλτρων σε μια εικόνα. Τα φίλτρα αποθηκεύονται στην ίδια καθολική μεταβλητή 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
 Ελληνικά