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

トップ 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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript画像拡大鏡効果の実装方法の詳細な説明
  • JavaScript で補間を使用して画像グラデーションを実装する方法
  • JavaScript を使用して画像をぼかす方法の例
  • Javascript の基礎_埋め込み画像の簡単な実装
  • JavaScript 画像の遅延読み込みライブラリ Echo.js
  • JavaScript を使用して画像の明暗サイクルの変化を実装する方法
  • JSプレビュー画像はブラウザ上にローカル画像を表示します
  • JavaScript 画像処理 - アフィン変換の深い理解
  • Javascript 画像処理 - 画像形態学 (膨張と収縮)
  • Javascript 画像処理 - 行列に共通メソッドを追加する

<<:  MySQL の NULL と空の文字列

>>:  WindowsとLinux間でファイルを転送する方法

推薦する

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

IDEA で Docker を WSL2 にデプロイする詳細なプロセス

ローカル環境はWindows10+WSL2(Ubuntu)です。サーバーにDockerをインストール...

dockerコマンドの使用にはsudoは必要ありません

docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...

MySQL 8.0 のユーザーとロールの管理原則と使用方法の詳細

この記事では、MySQL 8.0 のユーザーとロールの管理について例を挙げて説明します。ご参考までに...

Docker を使用して Redis マスター スレーブ レプリケーション クラスターを構築する

マスタースレーブレプリケーションモードのクラスターでは、通常、1 つのマスターノードと 2 つ以上の...

Nodejs で WeChat アカウント分割を実装するためのサンプルコード

会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...

ページングクリックコントロールを実装するネイティブJS

これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

JavaScript 関数呼び出しの典型的なサンプルコード

目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...

WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...

Dockerボリュームマウントの実装方法

最も単純な hello world 出力イメージを作成することは最も簡単なスタートですが、実行中のコ...

VMware15 仮想マシン ブリッジ モードでインターネットにアクセスできない問題の解決方法

説明 ソリューションVMware 15 仮想マシン ブリッジ モードではインターネットにアクセスでき...

CSSを使用して画像フレームアニメーションと曲線の動きを実装する

すべてのアニメーションの基本原理は、対応する画像を短時間で次々に表示し、視覚的に動いているように見せ...

CSS のグリッドプロパティの使用に関する詳細な説明

グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...