看了下，距離上次發帖都是去年10月份的事，忙於工作的我很少跑博客園裡面來玩了。 做這個小網站的初衷是 https://tinypng.com/ 這個網站有時候訪問很慢，然後自己去研究了下圖片壓縮。 網上有看到 https://tinypng.com/ 中使用的 pngquant , 我去下載了png ...
看了下，距離上次發帖都是去年10月份的事，忙於工作的我很少跑博客園裡面來玩了。
做這個小網站的初衷是 https://tinypng.com/ 這個網站有時候訪問很慢，然後自己去研究了下圖片壓縮。
網上有看到 https://tinypng.com/ 中使用的 pngquant , 我去下載了pngquant的cli看了下，然後就開始了這個小網站的基礎。
先看看前端頁面：
這個功能還會擴建，所以現在界面只有簡潔的一部分。
現在的功能基本上只有圖片壓縮和打包下載，
前端頁面用到的： vue、webuploader、jq、layer、jszip
後端：express、co、md5、imagemin
才開始的時候使用的是純pngquant-lib操作，雖然成功了，但是只能壓縮png圖片，所以拋棄了，去npmjs網站看了下，最後決定壓縮直接用imagmin 前人栽樹後人乘涼嘛。
整個流程邏輯，簡單說就是：上傳-壓縮-打包
下麵我就分步來說說處理的內容；
1. 上傳
這裡的上傳使用的百度webuploader插件，用習慣了。
上傳只做的對圖片的驗證，其它的沒處理，比如文件大小什麼的，所以大文件上傳估計會有問題。
在用戶打開頁面的時候會分配一個目錄用於保存上傳的圖片和壓縮圖片，其主要作用就是保存當前上傳信息，後期擴展會用到，現在沒什麼大用處，主要作用可以避免用戶上傳圖片不會出現衝突的情況。
2. 壓縮
壓縮使用的是：imagemin 寫這個的是真大神 現在圖片外流的圖片壓縮演算法基本上都有他的影子 膜拜，不廢話了
對imagemin進行一個簡單的包裝，方面項目內部使用
成功壓縮後返回壓縮後的圖片大小、名稱和base64數據
3. 打包：使用的是jszip在前端打包，本來想在後端打包，但是考慮到性能問題，打包就交給前端了，前端也沒考慮瀏覽器相容，
數據返回後，把接受到的數據放到zip裡面去，然後就可以等待用戶下載了。
遇到的問題：
1. imagemin中
imageminMozjpeg壓縮配置：
2. jszip壓縮，不需要 data:image/png;base64, 這個字元串，但是為了前端預覽壓縮後的文件，我在後端添加了這段文件頭
開始搗鼓了半天，只知道報錯，
最後打開jszip.js裡面才看到
需要把base64頭部的文件信息去掉，然後手動解決
最後總算搞定了。
這個壓縮工具也算不錯，不過什麼都壓縮，但是只有圖片會進行處理，如果是其它文件它只會移動了文件而不壓縮，即便是改變尾碼也不會壓縮。
我測試了100多張jpg圖片，基本能壓縮65%左右，不過不知道什麼原因，壓縮後用qq的圖片瀏覽器看到居然有問題，其它的地方看到都沒問題
最後附上github地址：https://github.com/zoeDylan/z_img
