tinypng upload一鍵壓縮上傳工具

hlcc 發(fā)布于2019-08-22 18:18 / 1577人閱讀

摘要：關(guān)于這是一個(gè)基于的圖片壓縮上傳工具，壓縮過程主要通過調(diào)用提供的完成。因?yàn)槭亲烂娑耍院芊奖阄覀儗D片拖拽到任務(wù)托盤進(jìn)行壓縮上傳，極大地提升了前端的工作效率，可以讓我們更專注于業(yè)務(wù)開發(fā)。

地址

項(xiàng)目地址：tinypng-upload

有興趣的可以玩一玩，因?yàn)槠綍r(shí)經(jīng)常會(huì)用到圖片壓縮，上傳，如果你也覺得很繁瑣的話，這個(gè)將會(huì)解決你的痛點(diǎn)。

關(guān)于 tinypng-upload

這是一個(gè)基于 electron的圖片壓縮上傳工具，壓縮過程主要通過調(diào)用tinypng提供的API完成。上傳配置參考iView的文件上傳配置。
因?yàn)槭亲烂娑耍院芊奖阄覀儗D片拖拽到任務(wù)托盤進(jìn)行壓縮上傳，極大地提升了前端的工作效率，可以讓我們更專注于業(yè)務(wù)開發(fā)。

操作過程：

壓縮前后體積對(duì)比（圖片壓縮完成已自動(dòng)上傳到指的CDN）：

使用 1. 下載可執(zhí)行文件

因?yàn)闀簳r(shí)沒有發(fā)布到應(yīng)用商店，所以需要自己編譯出可執(zhí)行文件：

git clone https://github.com/muwoo/tinypng-upload.git
cd tinypng-upload
npm i
npm run build

然后會(huì)在build目錄下生成對(duì)應(yīng)的可執(zhí)行文件，運(yùn)行改文件即可

2. 配置tinypng API key

因?yàn)樵擁?xiàng)目壓縮過程是通過調(diào)用 tinypng API來(lái)實(shí)現(xiàn)的，所以我們需要去tinypng網(wǎng)站上注冊(cè)一個(gè)API key：

然后將該值粘貼到我們的配置一欄中：

只不過有一點(diǎn)限制，免費(fèi)的每個(gè)月可以壓縮 500 張圖片。github 上也有人通過循環(huán)注冊(cè)的過程，生成了多個(gè)賬戶API key達(dá)到近似于不限制壓縮次數(shù)的目的。有興趣也可以了解一下~

3. 配置壓縮后圖片上傳請(qǐng)求

壓縮完成之后，我們希望圖片可以直接上傳到我們公司的CDN上，tiny-png upload上傳參考了iView的圖片上傳參數(shù)和設(shè)置：上傳 upload

Property	Decription	Type	Default
action	Upload request URL, required.	String	-
headers	Upload request header.	Object	{}
data	Extra data with upload request.	Object	{}
name	The key in upload request targeting to the file.	String	file
with-credentials	Enable certification info in Cookie or not.	Boolean	false