用JavaScript處理圖像可能非常困難且繁瑣。幸運的是，有許多庫可以使事情變得簡單得多。以下就是我最喜歡的一些圖片處理庫。

如果發現有用的東西，請嘗試將其包裝為所選框架的組成部分。這樣，你將擁有一個具有聲明式API的可重用組件，隨時可以使用。

1、Pica

此插件可幫助你減小大圖像的上傳文件大小，從而節省上傳時間。使你可以在瀏覽器中調整圖像大小，而不會出現像素化并且相當快。它會從網絡工作者，網絡程序集，createImageBitmap和純JS中自動選擇最佳的可用技術。Demo：http://nodeca.github.io/pica/demo/Github：https://github.com/nodeca/pica

2、Lena.js

這個很酷的圖像庫很小，但有22個圖像濾鏡，非常好玩。你還可以創建新過濾器并將其添加到Github存儲庫。

Demo：https://fellipe.com/demos/lena-js/講解：https://ourcodeworld.com/articles/read/515/how-to-add-image-filters-photo-effects-to-images-in-the-browser-with-javascript-using-lena-jsGithub：https://github.com/davidsonfellipe/lena.js

3、Compressor.js

這是一個簡單的JS圖像壓縮器，它使用瀏覽器的本機canvas.toBlob API來處理圖像壓縮。這使你可以將其壓縮輸出，質量設置為0到1。

Demo：https://fengyuanchen.github.io/compressorjs/Github：https://github.com/fengyuanchen/compressorjs

自己是從事了五年的前端工程師，自己整理了一份最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴，需要可以私聊我喲，這是我的前端開發qun，【六零三】【九八五】【九九三】，直接群里下載，對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我

4、Fabric.js

Fabric.js允許你<canvas>使用JavaScript在網頁的HTML 元素上輕松創建簡單的形狀（如矩形，圓形，三角形和其他多邊形）或由許多路徑組成的更復雜的形狀。然后，Fabric.js將允許您使用鼠標來操縱這些對象的大小，位置和旋轉。也可以使用Fabric.js庫更改這些對象的某些屬性，例如它們的顏色，透明度，網頁上的深度位置或選擇這些對象的組。Fabric.js還允許您將SVG圖像轉換為JavaScript數據，該數據可用于將其放置到<canvas>元素上。

Demo：http://fabricjs.com/

教程：http://fabricjs.com/articles/

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

5、圖片模糊化

這是一個很小的（0?2kb）庫，用于模糊圖片，并在各css模式之間提供了降級支持canvas。該插件在以下三種模式下工作：

• css：使用filterproperty（default）
• canvas：使用canvas導出base64
• auto：css首先使用模式，否則canvas自動切換到模式

你只需要將圖像，模糊值和模式傳遞給函數，即可簡單有效地獲得模糊圖像。Demo：https://justclear.github.io/blurify/Github：https://github.com/JustClear/blurify

6、圖像合并

該庫可以幫助你輕松地將圖像合成在一起，而不會弄亂畫布。有時，使用畫布可能會有些困難，尤其是在你只需要畫布上下文來執行相對簡單的操作（例如將某些圖像合并到一起）時。merge-images將所有重復性任務抽象為一個簡單的函數調用。

圖像可以彼此重疊并重新放置。該函數返回一個Promise，該Promise解析為base64數據URI。同時支持瀏覽器和Node.js。

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

7、Cropper.js

該插件是一個簡單的JavaScript圖像裁剪器，可讓你在交互式環境中裁剪，旋轉，縮放和縮放圖像。它還允許設置縱橫比。

Demo：https://fengyuanchen.github.io/cropperjs/Github：https://github.com/fengyuanchen/cropperjs8、CamanJS

它是Javascript的畫布操作庫。它結合了易于使用的界面和先進，高效的圖像/畫布編輯技術。使用新的過濾器和插件很容易進行擴展，并且它具有廣泛的圖像編輯功能，并且這種功能還在不斷增長。它完全獨立于庫，并且可以在NodeJS和瀏覽器中使用。你可以選擇一組預設濾鏡或手動更改屬性（例如亮度，對比度，飽和度）以獲得所需的輸出。

Demo：http://camanjs.com/examples/

官網：http://camanjs.com/

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

9、MarvinJ

MarvinJ是派生自Marvin Framework的純JavaScript圖像處理框架。MarvinJ對于許多不同的圖像處理應用程序而言既簡單又強大。

Marvin提供了許多算法來操縱顏色和外觀。Marvin還可以自動檢測功能。使用基本圖像功能（如邊緣，拐角和形狀）的能力是圖像處理的基礎。該插件有助于檢測和分析對象的角點，從而確定場景中主要對象的位置。由于這些原因，可以自動裁剪出對象。

官網：https://www.marvinj.org/en/index.html

Github：https://github.com/gabrielarchanjo/marvinj

10、Grade

該JS庫提供圖像中的前2種主要顏色生成的互補漸變。這樣一來，你的網站就可以使用從圖片中導出的匹配漸變色來填充div標簽了。這是一個易于使用的插件，可幫助你保持網站的外觀美觀。

這個插件是我個人非常喜歡的一個插件，因為我經歷了很多麻煩才能獲得該插件提供的類似輸出。

HTML文件：

<!--the gradients will be applied to these outer divs, as background-images--> <div class="gradient-wrap"><img src="./samples/finding-dory.jpg" alt="" /> </div> <div class="gradient-wrap"><img src="./samples/good-dinosaur.jpg" alt="" /> </div>

JS文件：

<script src="path/to/grade.js"></script> <script type="text/javascript">window.addEventListener('load', function(){/*A NodeList of all your image containers (Or a single Node).The library will locate an <img /> within eachcontainer to create the gradient from.*/Grade(document.querySelectorAll('.gradient-wrap'))}) </script>

Demo：https://benhowdle89.github.io/grade/

Github：https://github.com/benhowdle89/grade

總結

希望你喜歡這篇文章。也歡迎你隨時留下你的評論。編碼愉快！

總結

以上是生活随笔為你收集整理的图片模糊化处理_10个JavaScript图像处理库，收藏好留备用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。