10 個「賊」好用JavaScript圖像處理庫

用 JavaScript 處理圖像可能很是困難且繁瑣。 幸運的是，有許多庫可讓這些變得簡單得多。 下面介紹一些圖像處理的庫。 

1. Pica 

事例地址：http://nodeca.github.io/pica/demo/ 

Github: https://github.com/nodeca/pica pica 

可在瀏覽器上實現高質量並且高性能的圖片大小調整JS庫，目標是在瀏覽器中以最快的速度進行高品質圖像縮放。它會從web-workers，web assembly，createImageBitmap和純JS中自動選擇最佳的可用技術。

 Pica是一個執行數學計算的底層開發庫，儘量地減小了封裝帶來的影響。若是對二進制圖像進行縮放，須要先加載到canvas（再保存爲blob）。 

2. Lena.js 

事例地址：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 

事例地址：https://fengyuanchen.github.io/compressorjs/ 

Github: https://github.com/fengyuanchen/compressorjs 

Compressor.js 一個JavaScript圖像壓縮器。 使用瀏覽器的原生canvas.toBlob API來執行壓縮工做，這意味着它是有損壓縮。 通常使用此方法在客戶端上傳圖像文件以前對其進行預壓縮。

 4. Fabric.js 

事例地址：http://fabricjs.com/ 

事例講解：http://fabricjs.com/articles/ 

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

Fabric是一個強大而簡單的JS Canvas庫，咱們能經過使用它實如今Canvas上建立、填充圖形、給圖形填充漸變顏色。 組合圖形（包括組合圖形、圖形文字、圖片等）等一系列功能。簡單來講咱們能夠經過使用Fabric從而以較爲簡單的方式實現較爲複雜的Canvas功能 

還可使用Fabric.js庫更改這些對象的某些屬性，例如它們的顏色，透明度，網頁上的深度位置，或選擇這些對象的組。 Fabric.js還能夠將 SVG 圖像轉換爲 JavaScript數據，該數據可用於將其放入<canvas>元素。 

5. Blurify 

blurify.js是一款小巧實用的js圖片模糊效果插件。使用該js插件能夠將任意圖片進行模糊處理。   

事例地址：https://justclear.github.io/blurify/

 Github: https://github.com/JustClear/blurify 

6.合併圖像

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

該庫使能夠輕鬆地將圖像合成在一塊兒。有時，使用畫布可能會有些繁瑣，特別是若是你只須要畫布上下文來作相對簡單的事情(例如將一些圖像合併在一塊兒)時。 

merge-images將全部重複性任務抽象爲一個簡單的函數調用。圖像能夠彼此重疊並從新放置。該函數返回一個Promise，該Promise解析爲base64數據URI。同時支持瀏覽器和Node.js。

7. Cropper.js 

事例地址：https://fengyuanchen.github.io/cropperjs/ 

Github: https://github.com/fengyuanchen/cropperjs

cropperjs是一款很是強大卻又簡單的圖片裁剪工具，它能夠進行很是靈活的配置，支持手機端使用，支持包括IE9以上的現代瀏覽器。

  8. CamanJS

事例地址：http://camanjs.com/examples/ 

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

CamanJS/ CamanJS 是一個基於 Canvas 處理圖片的 Javascript 庫，結合簡單易用的接口和先進高效的圖像編輯技術。CamanJS 很容易擴展新的過濾器和插件，並伴隨着一系列普遍的圖像編輯功能。它是徹底獨立的庫，支持工做在 NodeJS 和瀏覽器。 

9. MarvinJ 

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

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

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

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

 10. Grade 

事例地址：https://benhowdle89.github.io/grade/

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

 grade.js是一款能夠根據圖片的兩種主要顏色生成背景漸變的JS插件。它的原理是提取圖片的兩種主要顏色，而後使用這兩種顏色爲漸變的開始和結束顏色，應用在圖片容器上。 

交流

喜歡本文的，麻煩點贊，收藏，轉發啦，在學習web前端的過程當中，每每由於沒有資料或者沒人指導從而導本身不想學，所以我特地準備了個羣545667817，配套資料能夠找管理小姐姐領取！不論是學習到哪一個階段的小夥伴均可以獲取到本身相對應的資料，點贊收藏進羣的小夥伴還有機會獲取實體web前端學習書籍，感謝支持！！！

做者：前端小智 連接：https://segmentfault.com/a/1190000022926686 來源：SegmentFault 複製代碼