10大Js画像処理ライブラリ

紹介する
多くの人にとって、JavaScriptを使って画像を処理するのは非常に簡単なことではありません。幸いにも、第三者のライブラリを使って、私たちが欲しい機能を実現することができます。本記事では、JavaScriptの画像処理ライブラリがあれば、私たちが選択して使うことができます。以下のランキングは前後の区別がありません。
1.Pica
このプラグインは、アップロード時間を短縮するために、大きな画像のアップロードサイズを減らすことができます。これは、ブラウザで画像のサイズを調整することができます。web-workersから、weassiebly、createImageBitmap and純jsは自動的に優れた利用可能な技術を選択します。

は、大きな画像のアップロードサイズを低減し、アップロード時間を節約する。

は、画像処理においてサーバリソースを節約する。

は、ブラウザでサムネイルを生成する。

https://github.com/nodeca/pica
2.Lena.js
これは22個のフィルターを含む画像処理ライブラリです。
https://github.com/davidsonfellipe/lena.js
3.Commpresse or.js
これは簡単なJS画像圧縮器で、ブラウザの本機canvas.toBlob APIを使って画像圧縮を処理します。圧縮出力品質は0から1まで設定できます。
https://github.com/fengyuanchen/compressorjs
4.Fabric.js
Fabric.jsは、JavaScriptを使用してウェブページ上のhtml＜canvas＞要素を使用して、簡単な形状を簡単に作成することができます。例えば、長方形、円形、三角形、その他の多角形、あるいは多くの経路からなるより複雑な形状です。その後、Fabric.jsはマウスを使ってこれらのオブジェクトの大きさ、位置、回転を操作することができます。これらのオブジェクトのいくつかの属性は、例えば色、透明度、ウェブページ上の奥行き位置、またはこれらのオブジェクトのグループを選択するために、Fabric.jsライブラリを使用して変更することもできる。Fabric.jsは、SVG画像をJavaScriptデータに変換することも可能であり、このデータは、それを＜canvas＞要素に入れるために使用できる。
https://github.com/fabricjs/fabric.js
5.Blurify
イメージをぼかしたり、cssモードからcanvasモードまでの優雅な劣化をサポートします。このプラグインは3つのモードで動作します。

css：filter属性を使う

canvas：canvasを用いてbase 64を導出する

atot：cssモードが優先され、そうでないと自動的にcanvasモード

に切り替わります。
画像、ぼかし値、パターンを関数に渡すだけで、簡単で効果的なボケ画像が得られます。
https://github.com/JustClear/blurify
6.Merge Images
このライブラリは画像を簡単に合成することができます。キャンバスを使うと、ちょっと煩わしいかもしれません。特に、カンバスの文脈だけを必要とするなら、比較的簡単なことをします。merge-magesはすべての重複タスクを簡単な関数として抽象的に呼び出します。画像は互いに重ねて配置してもよい。この関数はPromiseを返します。このPromiseはBase 64データURIとして解析します。ブラウザとノード.jsを同時にサポートします。
https://github.com/lukechilds/merge-images
7.Cropper.js
このプラグインはJavaScriptの簡単な画像トリミング器で、可視化環境で画像を裁断したり、回転したり、拡大縮小したり、スケーリングしたりできます。アスペクト比の設定も可能です。
https://github.com/fengyuanchen/cropperjs
8.キャマンJS
それはJavascriptのcanvasライブラリです。使いやすいインターフェースと先進的で効率的な画像/canvas編集技術の組み合わせです。新しいフィルタやプラグインを使って、簡単に拡張できます。画像編集機能が広く、またこの機能が増えています。ライブラリから完全に独立し、NodeJSとブラウザで使用できます。プリセットフィルタのセットを選択したり、手動で属性（例えば、明るさ、コントラスト、彩度）を変更して、必要な出力を得ることができます。
https://github.com/meltingice/CamanJS/
9.Marvin J
MarvinJは、Marvin Fraamewarkから派生した純粋なJavaScript画像処理フレームです。MarvinJは多くの異なる画像処理アプリケーションに対して簡単で強力である。Marvinは色と外観を操作する多くのアルゴリズムを提供している。Marvinは自動検査機能も備えています。エッジ、角、形状などの基本画像機能を使用する能力は、画像処理の基礎である。このプラグインは、オブジェクトの角点を検出し、分析し、シーンの主要オブジェクトの位置を決定するのに役立ちます。そのため、オブジェクトを自動的に裁断することができます。
https://github.com/gabrielarchanjo/marvinj
10.Grade
このJSライブラリは、提供された画像の最初の2つの主要な色から相補的なグラデーションを生成する。これにより、ウェブサイトは、画像から導き出されたマッチンググラデーションを用いてdivを塗りつぶすことができる。これは使いやすいプラグインで、ウェブサイトの外観の美しさを維持するのに役立ちます。

<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', function(){ 
 Grade(document.querySelectorAll('.gradient-wrap')) 
 }) 
</script> 

以上は10大Js画像処理ライブラリの詳細です。Js画像処理ライブラリに関する資料は他の関連記事に注目してください。