トップ 10 Js 画像処理ライブラリ

導入

多くの人にとって、JavaScriptを使用して画像を処理することはそれほど簡単なことではありません。幸いなことに、サードパーティのライブラリを使用して必要な機能を実現できます。この記事では、選択して使用できるJavaScript画像処理ライブラリを紹介します。以下のランキングは順不同です。

1. 異食症

このプラグインは大きな画像のアップロードサイズを縮小し、アップロードにかかる時間を節約します。ピクセル化せずにブラウザ内で画像のサイズを変更でき、かなり高速です。 Web ワーカー、Web アセンブリ、createImageBitmap、および pure js から利用可能な最適なテクノロジーを自動的に選択します。

大きな画像のアップロードサイズを縮小し、アップロード時間を節約します。
画像処理におけるサーバーリソースを節約します。
ブラウザでサムネイルを生成します。

https://github.com/nodeca/pica

2. レナ

これは22個のフィルターを含む画像処理ライブラリです

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

3. コンプレッサー

これは、ブラウザのネイティブ canvas.toBlob API を使用して画像圧縮を処理するシンプルな JS 画像圧縮ツールです。圧縮出力品質は 0 から 1 まで設定できます。

https://github.com/fengyuanchen/compressorjs

4. ファブリック

Fabric.js を使用すると、JavaScript を使用して、Web ページ上の html <canvas> 要素に、長方形、円、三角形、その他の多角形などの単純な図形や、多数のパスで構成されたより複雑な図形を簡単に作成できます。 Fabric.js では、マウスを使用してこれらのオブジェクトのサイズ、位置、回転を操作できるようになります。また、これらのオブジェクトの色、透明度、Web ページ上の深度位置などの一部のプロパティを変更したり、Fabric.js ライブラリを使用してこれらのオブジェクトのグループを選択したりすることもできます。 Fabric.js では、SVG 画像を JavaScript データに変換して、<canvas> 要素に配置することもできます。

出典: Fabric

5. ぼかす

CSS モードからキャンバスモードへの段階的な劣化をサポートし、画像をぼかすために使用されます。プラグインは次の 3 つのモードで動作します。

CSS: フィルタープロパティの使用
キャンバス: キャンバスを使用してbase64をエクスポートする
auto: CSS モードが優先されます。それ以外の場合は、自動的にキャンバスモードに切り替わります。

画像、ぼかし値、モードを関数に渡すだけで、シンプルで効果的なぼかし画像が得られます。

https://github.com/JustClear/blurify

6. 画像を結合する

このライブラリを使用すると、画像を簡単に合成できます。キャンバスの操作は、特にいくつかの画像を結合するなど比較的単純な操作を行うためにのみキャンバスコンテキストが必要な場合は、少し面倒になることがあります。 merge-images は、すべての反復タスクを単純な関数呼び出しに抽象化します。画像は重ねて配置したり、位置を変更したりできます。この関数は、base64 データ URI に解決される Promise を返します。ブラウザと Node.js の両方をサポートします。

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

7. クロッパー

このプラグインは、視覚的な環境で画像を切り抜き、回転、拡大縮小、ズームするシンプルな JavaScript 画像クロッパーです。アスペクト比の設定も可能です。

https://github.com/fengyuanchen/cropperjs

8. カマンJS

これは、Javascript 用のキャンバス操作ライブラリです。使いやすいインターフェースと、高度で効率的な画像/キャンバス編集テクノロジーを組み合わせています。新しいフィルターやプラグインで簡単に拡張でき、幅広い画像編集機能を備えており、常に成長を続けています。ライブラリから完全に独立しており、NodeJS とブラウザの両方で使用できます。プリセットフィルターのセットから選択するか、明るさ、コントラスト、彩度などのプロパティを手動で変更して、目的の出力を得ることができます。

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

9. マーヴィンJ

MarvinJ は、Marvin フレームワークから派生した純粋な JavaScript 画像処理フレームワークです。 MarvinJ はシンプルでありながら、さまざまな画像処理アプリケーションに強力に対応します。 Marvin は、色と外観を操作するための多くのアルゴリズムを提供します。 Marvinには自動検出機能も備わっています。エッジ、コーナー、形状などの基本的な画像の特徴を使用する能力は、画像処理の基本です。このプラグインは、オブジェクトのコーナーを検出して分析し、シーン内の主要なオブジェクトの位置を決定するのに役立ちます。これにより、オブジェクトを自動的に切り取ることができます。

https://github.com/gabrielarchanjo/marvinj

10. グレード

この JS ライブラリは、提供された画像の最初の 2 つのメインカラーから生成された補色グラデーションを生成します。これにより、サイトでは、画像から派生した一致するグラデーションで div を塗りつぶすことができます。これは、Web サイトの見栄えを良く保つのに役立つ、使いやすいプラグインです。

<div class="gradient-wrap"> 
    <img src="./samples/finding-dory.jpg" alt="" /> 
</div> 
<div class="gradient-wrap"> 
    <img src="./samples/good-dinosaur.jpg" alt="" /> 
</div> 
<script src="path/to/grade.js"></script> 
<script type="text/javascript"> 
 window.addEventListener('load', 関数(){ 
 グレード(document.querySelectorAll('.gradient-wrap')) 
 }) 
</スクリプト>

上記は、トップ 10 の Js 画像処理ライブラリの詳細です。Js 画像処理ライブラリの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: