Top 10 Js Bildverarbeitungsbibliotheken

einführen

Für viele Leute ist die Verwendung von JavaScript zur Bildverarbeitung keine ganz einfache Sache. Glücklicherweise können wir Bibliotheken von Drittanbietern verwenden, um die gewünschten Funktionen zu erreichen. In diesem Artikel wird vorgestellt, welche JavaScript-Bildverarbeitungsbibliotheken wir auswählen und verwenden können! Die folgenden Ranglisten sind in keiner bestimmten Reihenfolge

1. Pica

Dieses Plugin reduziert die Upload-Größe großer Bilder und spart Ihnen so Zeit beim Hochladen. Es kann die Größe von Bildern im Browser ohne Pixelbildung ändern und ist ziemlich schnell. Es wählt automatisch die besten verfügbaren Technologien aus Web Workers, Web Assembly, CreateImageBitmap und Pure JS aus.

• Reduzieren Sie die Upload-Größe großer Bilder und sparen Sie Upload-Zeit;
• Sparen Sie Serverressourcen bei der Bildverarbeitung;
• Miniaturansichten im Browser generieren;

https://github.com/nodeca/pica

2. Lena.js

Dies ist eine Bildverarbeitungsbibliothek mit 22 Filtern

https://github.com/davidsonfellipe/lena.js

3. Compressor.js

Dies ist ein einfacher JS-Bildkompressor, der die native canvas.toBlob-API des Browsers zur Bildkomprimierung verwendet. Die Komprimierungsausgabequalität kann von 0 bis 1 eingestellt werden.

https://github.com/fengyuanchen/compressorjs

4. Stoff.js

Fabric.js ermöglicht die einfache Erstellung einfacher Formen wie Rechtecke, Kreise, Dreiecke und anderer Polygone oder komplexerer Formen, die aus vielen Pfaden auf einem HTML-<canvas>-Element auf einer Webseite mit JavaScript bestehen. Fabric.js ermöglicht dann die Manipulation von Größe, Position und Drehung dieser Objekte mit der Maus. Es ist auch möglich, einige Eigenschaften dieser Objekte wie Farbe, Transparenz, Tiefenposition auf der Webseite zu ändern oder Gruppen dieser Objekte mithilfe der Fabric.js-Bibliothek auszuwählen. Fabric.js ermöglicht auch die Konvertierung von SVG-Bildern in JavaScript-Daten, die zum Einfügen in ein <canvas>-Element verwendet werden können.

https://github.com/fabricjs/fabric.js

5. Verwischen

Wird zum Verwischen von Bildern verwendet, mit Unterstützung für schrittweise Herabstufung vom CSS-Modus zum Canvas-Modus. Das Plugin funktioniert in drei Modi:

• CSS: Verwenden der Filtereigenschaft
• Canvas: Verwenden Sie Canvas, um Base64 zu exportieren
• auto: Der CSS-Modus hat Vorrang, andernfalls wird automatisch in den Canvas-Modus gewechselt

Übergeben Sie der Funktion einfach das Bild, den Unschärfewert und den Modus, um ein einfaches und effektiv unscharfes Bild zu erhalten.

https://github.com/JustClear/blurify

6. Bilder zusammenführen

Diese Bibliothek erleichtert das Zusammensetzen von Bildern. Manchmal kann die Arbeit mit Canvas etwas mühsam sein, insbesondere wenn Sie einen Canvas-Kontext nur für eine relativ einfache Aufgabe benötigen, wie etwa das Zusammenführen einiger Bilder. merge-images abstrahiert alle sich wiederholenden Aufgaben in einen einfachen Funktionsaufruf. Bilder können übereinandergelegt und neu positioniert werden. Die Funktion gibt ein Promise zurück, das in eine Base64-Daten-URI aufgelöst wird. Unterstützt sowohl Browser als auch Node.js.

https://github.com/lukechilds/merge-images

7. Cropper.js

Dieses Plugin ist ein einfacher JavaScript-Bildbeschneider, der Bilder in einer visuellen Umgebung zuschneidet, dreht, skaliert und zoomt. Außerdem ermöglicht es die Einstellung des Seitenverhältnisses.

https://github.com/fengyuanchen/cropperjs

8. CamanJS

Es handelt sich um eine Canvas-Manipulationsbibliothek für Javascript. Es kombiniert eine benutzerfreundliche Oberfläche mit fortschrittlicher, effizienter Bild-/Leinwandbearbeitungstechnologie. Es lässt sich problemlos mit neuen Filtern und Plug-ins erweitern und verfügt über eine breite Palette an Bildbearbeitungsfunktionen, die ständig erweitert werden. Es ist völlig unabhängig von der Bibliothek und kann sowohl in NodeJS als auch im Browser verwendet werden. Sie können aus einer Reihe voreingestellter Filter wählen oder Eigenschaften wie Helligkeit, Kontrast und Sättigung manuell ändern, um das gewünschte Ergebnis zu erhalten.

https://github.com/meltingice/CamanJS/

9. MarvinJ

MarvinJ ist ein reines JavaScript-Bildverarbeitungs-Framework, das vom Marvin Framework abgeleitet ist. MarvinJ ist einfach und dennoch leistungsstark für viele verschiedene Bildverarbeitungsanwendungen. Marvin bietet viele Algorithmen zur Manipulation von Farbe und Aussehen. Marvin verfügt außerdem über eine automatische Erkennungsfunktion. Die Fähigkeit, grundlegende Bildmerkmale wie Kanten, Ecken und Formen zu verwenden, ist für die Bildverarbeitung von grundlegender Bedeutung. Das Plug-In hilft beim Erkennen und Analysieren der Ecken von Objekten und bestimmt so die Positionen der Hauptobjekte in der Szene. Dadurch können Objekte automatisch ausgeschnitten werden.

https://github.com/gabrielarchanjo/marvinj

10. Klasse

Diese JS-Bibliothek erstellt einen komplementären Farbverlauf, der aus den ersten beiden Hauptfarben im bereitgestellten Bild generiert wird. Dadurch kann die Site das Div mit einem passenden, aus dem Bild abgeleiteten Farbverlauf füllen. Dies ist ein benutzerfreundliches Plug-In, das dazu beiträgt, dass Ihre Website großartig aussieht.

<div Klasse="Gradient-Wrap"> 
    <img src="./samples/findet-dory.jpg" alt="" /> 
</div> 
<div Klasse="Gradient-Wrap"> 
    <img src="./samples/good-dinosaur.jpg" alt="" /> 
</div> 
<script src="Pfad/zu/Grade.js"></script> 
<Skripttyp="text/javascript"> 
 window.addEventListener('laden', Funktion(){ 
 Note(document.querySelectorAll('.gradient-wrap')) 
 }) 
</Skript>

Oben finden Sie die Details zu den 10 wichtigsten Js-Bildverarbeitungsbibliotheken. Weitere Informationen zu Js-Bildverarbeitungsbibliotheken finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!