發(fā)現(xiàn)了 10 個好用JavaScript圖像處理庫
本文已經(jīng)作者授權(quán)
用 JavaScript 處理圖像可能非常困難且繁瑣。幸運的是，有許多庫可以讓這些變得簡單得多。下面介紹一些圖像處理的庫。
1. Pica
事例地址：http://nodeca.github.io/pica/demo/Github: https://github.com/nodeca/pica
pica 可在瀏覽器上實現(xiàn)高質(zhì)量而且高性能的圖片大小調(diào)整JS庫，目標是在瀏覽器中以最快的速度進行高品質(zhì)圖像縮放。它會從web-workers，web assembly，createImageBitmap和純JS中自動選擇最佳的可用技術(shù)。
Pica是一個執(zhí)行數(shù)學計算的底層開發(fā)庫，盡可能地減少了封裝帶來的影響。如果對二進制圖像進行縮放，需要先加載到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來執(zhí)行壓縮工作，這意味著它是有損壓縮。一般使用此方法在客戶端上傳圖像文件之前對其進行預壓縮。
4. Fabric.js
事例地址：http://fabricjs.com/事例講解：http://fabricjs.com/articles/Github: https://github.com/fabricjs/fabric.js
Fabric是一個強大而簡單的JS Canvas庫，我們能通過使用它實現(xiàn)在Canvas上創(chuàng)建、填充圖形、給圖形填充漸變顏色。組合圖形（包括組合圖形、圖形文字、圖片等）等一系列功能。簡單來說我們可以通過使用Fabric從而以較為簡單的方式實現(xiàn)較為復雜的Canvas功能
還可以使用Fabric.js庫更改這些對象的某些屬性，例如它們的顏色，透明度，網(wǎng)頁上的深度位置，或選擇這些對象的組。Fabric.js還可以將 SVG 圖像轉(zhuǎn)換為 JavaScript數(shù)據(jù)，該數(shù)據(jù)可用于將其放入<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將所有重復性任務抽象為一個簡單的函數(shù)調(diào)用。圖像可以彼此重疊并重新放置。該函數(shù)返回一個Promise，該Promise解析為base64數(shù)據(jù)URI。同時支持瀏覽器和Node.js。
7. Cropper.js
事例地址：https://fengyuanchen.github.io/cropperjs/
Github: https://github.com/fengyuanchen/cropperjs
cropperjs是一款非常強大卻又簡單的圖片裁剪工具，它可以進行非常靈活的配置，支持手機端使用，支持包括IE9以上的現(xiàn)代瀏覽器。
8. CamanJS
事例地址：http://camanjs.com/examples/
Github: https://github.com/meltingice/CamanJS/
CamanJS 是一個基于 Canvas 處理圖片的 Javascript 庫，結(jié)合簡單易用的接口和先進高效的圖像編輯技術(shù)。CamanJS 很容易擴展新的過濾器和插件，并伴隨著一系列廣泛的圖像編輯功能。它是完全獨立的庫，支持工作在 NodeJS 和瀏覽器。
9. MarvinJ
官網(wǎng)：https://www.marvinj.org/en/index.htmlGithub: 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是一款可以根據(jù)圖片的兩種主要顏色生成背景漸變的JS插件。它的原理是提取圖片的兩種主要顏色，然后使用這兩種顏色為漸變的開始和結(jié)束顏色，應用在圖片容器上。
作者：Mahdhi Rezvi 譯者：前端小智 來源：medium
原文：https://blog.bitsrc.io/image-manipulion-libraries-for-javascript-187fde2ad5af
本文轉(zhuǎn)載自微信公眾號「前端小智 」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系前端小智 公眾號。
