用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-js

Github：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

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/cropperjs

8、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文件：

JS文件：

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

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

總結

希望你喜歡這篇文章。也歡迎你隨時留下你的評論。千鋒廣州小編祝大家編碼愉快！

總結

以上是生活随笔為你收集整理的cropper.js 图像旋转问题_快速提高前端开发效率：10个JavaScript图像处理库的全部內容，希望文章能夠幫你解決所遇到的問題。

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