[譯] 2020 十大 JavaScript 圖像處理庫

• 原文地址：10 JavaScript Image Manipulation Libraries for 2020
• 原文做者：Mahdhi Rezvi
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：IAMSHENSH
• 校對者：niayyy-S

2020 十大 JavaScript 圖像處理庫

用 JavaScript 處理圖像可能很是困難且繁瑣。幸運的是，有許多庫能夠使這事變得很是簡單。如下是我最喜歡的不一樣類別的庫。

若是你發現有用的東西，嘗試將其封裝成所選框架的組件。經過這種方式，你將擁有一個具有聲明式 API 的可複用組件，並隨時可用。

1. Pica

此插件可助你減少大圖的上傳大小，從而節省上傳時間。它容許你在瀏覽器中調整圖像大小，響應迅速而且不會出現像素化，由於它會從 Web Workers、WebAssembly、createImageBitmap 方法以及純 JavaScript 中自動選擇最佳的可用技術。

演示 Github

---

2. Lena.js

這個炫酷的圖像庫雖然很是小，但其大約有 22 個圖像濾鏡，很是好玩。你還能夠向 GitHub 倉庫中建立並添加新濾鏡。

演示 教程 Github

---

3. Compressor.js

這是一個簡單的 JavaScript 圖像壓縮器，它使用瀏覽器原生的 canvas.toBlob API 來處理圖像壓縮。這使你能夠在 0 到 1 之間設置壓縮輸出質量。

演示 Github

---

4. Fabric.js

Fabric.js 容許你使用 JavaScript 在網頁上的 HTML \ <canvas> 元素上輕鬆建立簡單的形狀，例如矩形、圓形、三角形和其餘多邊形，或者由許多路徑組成的更復雜的形狀。Fabric.js 還容許你使用鼠標來操縱這些對象的大小，位置和旋轉。

也能夠使用 Fabric.js 庫更改這些對象的屬性，例如它們的顏色，透明度，網頁上的深度位置，或選擇這些對象的組。Fabric.js 還容許你將 SVG 圖像轉換爲 JavaScript 數據，並直接在 \ <canvas> 元素中使用。

演示 教程 Github

---

5. Blurify

這是一個很小的（約 2kb）庫，用於模糊圖片，並具備從 css 模式到 canvas 模式的優秀降級支持。該插件在如下三種模式下工做：

• css：使用 filter 屬性（默認）
• canvas：使用 canvas 導出 base64 格式
• auto：優先使用 css 模式，不支持則自動轉換爲 canvas 模式

你只須要將圖像，模糊值和模式傳遞給函數，便可簡單有效地得到模糊圖像。

演示 Github

---

6. Merge Images

該庫讓你能夠輕鬆地合成圖像，而不會弄亂畫布。有時，使用畫布可能會有些痛苦，尤爲是在你只須要一個畫布上下文來執行相對簡單的操做時（例如合併圖像）。merge-images 將全部重複性任務抽象爲一個簡單的函數。

圖像能夠彼此重疊和調換位置。該函數返回一個 Promise，並 resolve 一個 base64 數據類型的 URI。同時支持瀏覽器和 Node.js。

Github

---

7. Cropper.js

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

演示 Github

---

8. CamanJS

這是 JavaScript 的畫布操做庫。其具備簡單易用的接口與先進高效的圖像/畫布編輯技術。經過新濾鏡和插件很容易進行擴展，而且它具備一系列的圖像編輯功能，而這種功能還在不斷增長。它徹底無依賴，並能夠同時在 Node.js 和瀏覽器中使用。

你能夠選擇一組預設濾鏡或手動更改屬性（例如亮度，對比度，飽和度）以得到所需的結果。

演示 官網 Github

---

9. MarvinJ

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

Marvin 除了提供許多算法來控制顏色和外觀，還具備自動檢測特徵的能力。其圖像處理能力是基於圖像的基礎特徵（例如邊緣、拐角與形狀）來實現的。此插件經過檢測與分析對象的角點，從而定位場景中主要對象。基於這些功能，讓它能夠自動裁剪出對象。

官網 Github

---

10. Grade

此 JavaScript 庫從圖像中的前 2 種主要顏色生成互補的漸變。這樣，你就能夠從圖像中提取出漸變效果，來填充網站上的 div。這是一個易用的插件，可幫助你保持網站視覺上的優美。

該插件是我我的今後列表中挑選出來的，我經歷了許多困難才經過此插件得到相似的輸出。

HTML 文件

<!--漸變將應用於這些外部 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>
複製代碼

JavaScript 腳本

<script src="path/to/grade.js"></script>
<script type="text/javascript"> window.addEventListener('load', function(){ /* 你全部圖像容器的節點列表（或單個節點）。 該庫將在每一個容器中找到一個 <img /> 來建立漸變。 */ Grade(document.querySelectorAll('.gradient-wrap')) }) </script>
複製代碼

演示 Github

---

但願你喜歡本文。若是你以爲有什麼須要補充，請隨時評論。

編碼愉快！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。