JavaScript中有哪些圖像處理庫

這篇文章將為大家詳細講解有關JavaScript中有哪些圖像處理庫，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。

1.Pica

此插件可減小大圖像的上傳大小，從而節省上傳時間。它可以在瀏覽器中調整圖像大小，而不會出現像素化現象并且相當快。它會從web-workers, web assembly, createImageBitmap and 純js自動選擇優秀的可用技術。

• 減小大圖像的上傳大小，節省上傳時間;

• 在圖像處理上節省服務器資源;

• 在瀏覽器中生成縮略圖;

https://github.com/nodeca/pica

2. Lena.js

這是一個包含22個濾鏡的圖像處理庫

https://github.com/davidsonfellipe/lena.js

3. Compressor.js

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

https://github.com/fengyuanchen/compressorjs

4. Fabric.js

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

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

5. Blurify

用于模糊圖片，并具有從css模式到canvas模式的優雅降級支持。該插件在三種模式下工作：

• css: 使用filter屬性

• canvas: 使用canvas導出base64

• auto: css模式優先, 否則自動切換到canvas模式

只需要將圖像，模糊值和模式傳遞給函數，即可獲得簡單有效的模糊圖像

https://github.com/JustClear/blurify

6. Merge Images

該庫使可以輕松地將圖像合成在一起。有時，使用畫布可能會有些繁瑣，特別是如果你只需要畫布上下文來做相對簡單的事情(例如將一些圖像合并在一起)時。merge-images將所有重復性任務抽象為一個簡單的函數調用。圖像可以彼此重疊并重新放置。該函數返回一個Promise，該Promise解析為base64數據URI。同時支持瀏覽器和Node.js。

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

7. Cropper.js

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

https://github.com/fengyuanchen/cropperjs

8. CamanJS

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

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

9. MarvinJ

MarvinJ是從Marvin Framework派生的純JavaScript圖像處理框架。MarvinJ對于許多不同的圖像處理應用程序而言既簡單又強大。Marvin提供了許多算法來操縱顏色和外觀。Marvin還具備自動檢測功能。使用基本圖像功能(如邊緣，拐角和形狀)的能力是圖像處理的基礎。該插件有助于檢測和分析對象的角點，從而確定場景中主要對象的位置。正因為如此，可以自動裁剪出對象。

https://github.com/gabrielarchanjo/marvinj

10. Grade

該JS庫產生從所提供圖像中的前2種主要顏色生成的互補漸變。這樣一來，網站就可以使用從圖片中導出的匹配漸變填充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> 
<script src="path/to/grade.js"></script> 
<script type="text/javascript"> 
 window.addEventListener('load', function(){ 
 Grade(document.querySelectorAll('.gradient-wrap')) 
 }) 
</script>

關于JavaScript中有哪些圖像處理庫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。