用JavaScript處理圖像可能非常困難且繁瑣。幸運(yùn)的是，有許多庫(kù)可以使事情變得簡(jiǎn)單得多。以下就是一些前端開發(fā)經(jīng)常要使用到的圖片處理庫(kù)，和千鋒廣州前端小編一起來(lái)看看吧！

如果發(fā)現(xiàn)有用的東西，請(qǐng)嘗試將其包裝為所選框架的組成部分。這樣，你將擁有一個(gè)具有聲明式API的可重用組件，隨時(shí)可以使用。

1、Pica

此插件可幫助你減小大圖像的上傳文件大小，從而節(jié)省上傳時(shí)間。使你可以在瀏覽器中調(diào)整圖像大小，而不會(huì)出現(xiàn)像素化并且相當(dāng)快。它會(huì)從網(wǎng)絡(luò)工作者，網(wǎng)絡(luò)程序集，createImageBitmap和純JS中自動(dòng)選擇最佳的可用技術(shù)。

Demo：http://nodeca.github.io/pica/demo/

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

2、Lena.js

這個(gè)很酷的圖像庫(kù)很小，但有22個(gè)圖像濾鏡，非常好玩。你還可以創(chuàng)建新過(guò)濾器并將其添加到Github存儲(chǔ)庫(kù)。

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

這是一個(gè)簡(jiǎn)單的JS圖像壓縮器，它使用瀏覽器的本機(jī)canvas.toBlob API來(lái)處理圖像壓縮。這使你可以將其壓縮輸出，質(zhì)量設(shè)置為0到1。

Demo：https://fengyuanchen.github.io/compressorjs/

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

4、Fabric.js

Fabric.js允許你<canvas>使用JavaScript在網(wǎng)頁(yè)的HTML 元素上輕松創(chuàng)建簡(jiǎn)單的形狀（如矩形，圓形，三角形和其他多邊形）或由許多路徑組成的更復(fù)雜的形狀。然后，Fabric.js將允許您使用鼠標(biāo)來(lái)操縱這些對(duì)象的大小，位置和旋轉(zhuǎn)。

也可以使用Fabric.js庫(kù)更改這些對(duì)象的某些屬性，例如它們的顏色，透明度，網(wǎng)頁(yè)上的深度位置或選擇這些對(duì)象的組。Fabric.js還允許您將SVG圖像轉(zhuǎn)換為JavaScript數(shù)據(jù)，該數(shù)據(jù)可用于將其放置到<canvas>元素上。

Demo：http://fabricjs.com/

教程：http://fabricjs.com/articles/

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

5、圖片模糊化

這是一個(gè)很小的（0?2kb）庫(kù)，用于模糊圖片，并在各css模式之間提供了降級(jí)支持canvas。該插件在以下三種模式下工作：

css：使用filterproperty（default）

canvas：使用canvas導(dǎo)出base64

auto：css首先使用模式，否則canvas自動(dòng)切換到模式

你只需要將圖像，模糊值和模式傳遞給函數(shù)，即可簡(jiǎn)單有效地獲得模糊圖像。

Demo：https://justclear.github.io/blurify/

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

6、圖像合并

該庫(kù)可以幫助你輕松地將圖像合成在一起，而不會(huì)弄亂畫布。有時(shí)，使用畫布可能會(huì)有些困難，尤其是在你只需要畫布上下文來(lái)執(zhí)行相對(duì)簡(jiǎn)單的操作（例如將某些圖像合并到一起）時(shí)。merge-images將所有重復(fù)性任務(wù)抽象為一個(gè)簡(jiǎn)單的函數(shù)調(diào)用。

圖像可以彼此重疊并重新放置。該函數(shù)返回一個(gè)Promise，該P(yáng)romise解析為base64數(shù)據(jù)URI。同時(shí)支持瀏覽器和Node.js。

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

7、Cropper.js

該插件是一個(gè)簡(jiǎn)單的JavaScript圖像裁剪器，可讓你在交互式環(huán)境中裁剪，旋轉(zhuǎn)，縮放和縮放圖像。它還允許設(shè)置縱橫比。

Demo：https://fengyuanchen.github.io/cropperjs/

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

8、CamanJS

它是Javascript的畫布操作庫(kù)。它結(jié)合了易于使用的界面和先進(jìn)，高效的圖像/畫布編輯技術(shù)。使用新的過(guò)濾器和插件很容易進(jìn)行擴(kuò)展，并且它具有廣泛的圖像編輯功能，并且這種功能還在不斷增長(zhǎng)。它完全獨(dú)立于庫(kù)，并且可以在NodeJS和瀏覽器中使用。

你可以選擇一組預(yù)設(shè)濾鏡或手動(dòng)更改屬性（例如亮度，對(duì)比度，飽和度）以獲得所需的輸出。

Demo：http://camanjs.com/examples/

官網(wǎng)：http://camanjs.com/

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

9、MarvinJ

MarvinJ是派生自Marvin Framework的純JavaScript圖像處理框架。MarvinJ對(duì)于許多不同的圖像處理應(yīng)用程序而言既簡(jiǎn)單又強(qiáng)大。

Marvin提供了許多算法來(lái)操縱顏色和外觀。Marvin還可以自動(dòng)檢測(cè)功能。使用基本圖像功能（如邊緣，拐角和形狀）的能力是圖像處理的基礎(chǔ)。該插件有助于檢測(cè)和分析對(duì)象的角點(diǎn)，從而確定場(chǎng)景中主要對(duì)象的位置。由于這些原因，可以自動(dòng)裁剪出對(duì)象。

官網(wǎng)：https://www.marvinj.org/en/index.html

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

10、Grade

該JS庫(kù)提供圖像中的前2種主要顏色生成的互補(bǔ)漸變。這樣一來(lái)，你的網(wǎng)站就可以使用從圖片中導(dǎo)出的匹配漸變色來(lái)填充div標(biāo)簽了。這是一個(gè)易于使用的插件，可幫助你保持網(wǎng)站的外觀美觀。

這個(gè)插件是我個(gè)人非常喜歡的一個(gè)插件，因?yàn)槲医?jīng)歷了很多麻煩才能獲得該插件提供的類似輸出。

HTML文件：

JS文件：

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

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

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。