本文旨在探究js壓縮圖片的兩種方式:
改變圖片長寬
,
改變圖片質量
,和結合了以上兩者的
最終方案
首先,閱讀本文需要知道canvas的兩個方法
這兩個方法具體的說明可以在MDN上查看,關於圖片壓縮,也有很多現成的博客可以直接用。但是那些博客都有個問題,並沒有關心之後圖片的壓縮質量。
我試著用壹個現成的例子去跑了壹下,壹個1.7M的圖片壓縮到了23k,堪稱像素級毀滅性破壞。
假如壹張大圖可能包含著很多文字等關鍵信息,必須上傳之後使用方能清晰辨認。所以要壓縮之後質量盡可能接近500k的。500k像素以內,就是若壹張圖寬度為1024,則高度不能超過500。因為圖片有其他的信息,也是要占大小的。即不得大於
1024*500
所以,根據需求,上傳圖片不能超過500k的情況下盡可能保留圖片的清晰度。當然如果可以的情況下用上面提到的設置壓縮程度為0.9,0.8試試看,圖片質量可以接受,大小會有大幅度的縮小。
如果不壓縮,靠調整圖片長寬去控制上傳大小呢?
原理很簡單,就是靠不斷地縮小限定的最大寬高,直到最終長寬的積小於規定的大小。
這種方法有可能最後得出的圖片的大小會略大於規定大小,原因上文也提到過了,如果想使用這種方法,可自行再調整壹下。
上面的方法有個問題,就是改變了圖片的原始長寬。如果壹個圖的長寬足夠大,壓縮圖片質量,糊壹點但是內容看得清也是ok的嘛。所以,跟上面同理,我們可以不斷調整圖片的質量設定直到大小合適,那麽,如何在圖片上傳之前知道圖片的大小呢?
首先,需要知道的壹點是,壓縮之後拿到的base64字符串會轉成blob對象,然後傳給服務端。
可以查閱文檔,blob對象有個屬性是size
這個size就是上傳之後實際的文件大小。
參照上面的思路,可以每次改變('image/'+fileType,level);level的值,去調整壓縮圖片質量,然後用blob對象的size去驗證是否滿足500k以內的需求。
關於的level到底是怎麽計算的,MDN文檔裏也沒說,寫了個循環壹次減少0.1的level壓縮了幾個圖片
用加減乘除算了壹下,沒找到規律,數學不好放棄了(這個東西好像也不是能觀察出來的,看結果跟初始大小沒啥關系)。
這裏要註意的是,有可能遇到超大圖片,0.1的level可能不足以壓縮到500k,所以小於0.1的時候,改變level遞減的差值繼續壓縮下去
在開始接收到圖片的時候給壹個loading增加用戶的耐心好了,loading萬歲~
其實單純的壓縮質量遇到稍大的圖片,會導致頁面高頻計算,然後頁面基本就用不了了--。有嘗試過用iphone的壹個屏幕截圖(10M左右),壓的時候稍過壹會,整個手機都在發燙,只能殺進程。
所以,若對長度沒有特殊的限制,可以做壹個縮放,去加快壓縮的進度,提高能壓縮的圖片大小上限。
頁面到了ios上還是不行--,可以看到最後圖片level為0.001,最長邊為764。
問題還是循環次數還是過多,計算頻率太高。從圖中可看出,對於大圖來說,初始設定的level和圖片尺寸過於寬松,可以優化壹下初始level和尺寸。
有的時候還會遇到壹張圖片無論如何也壓不到500k,就是上壹次和這次的壓縮後大小沒有變化,這種情況需要拋錯,不讓循環繼續。
大圖片的等待時間稍長,可以給用戶先預覽壹個base64的圖片增加等待耐心,方法名為getImgBase64,這裏都壹並給出了
解決的隱患:上面這個方案會出現我需要壹個500k的照片,壓到了520k之後,再壓了壹次。有時候這最後的壹次會特別誇張,直接將圖片弄到了幾十k。
參考了:
這個庫裏面有個方法compressAccurately,這個方法可以比較精準地壓縮。偷偷翻了壹下源碼。
其實上壹個方案的痛點就在於,如何在每壹個壓縮循環裏處理尺寸和壓縮比例。
總結
如有紕漏,歡迎指正
怎麽把圖片壓縮的小壹點，質量還要保持不變照片文件需要壓縮變小,但是圖片畫面清晰質量不變,可以使用以下操作方法:
1、獲取工具“
秒會壓縮大師
”,選擇操作
2、導入照片進行操作。
3、最後等待圖片壓縮完成。
4、說明壓縮模式:
縮小優先(適合用於個人資料圖片和縮率圖)
均衡壓縮(適合用於
電子郵件
和消息發送)
清晰優先(適合查看)
推薦理由:
1.__J窖顧跬計:可根據需求選擇圖片壓縮模式(如縮小優先、清晰優先),並支持自定義設圖片壓縮的清晰度、分辨率、格式以及希望大小。
2._.操作簡單快速:可壹次性上傳多張需要壓縮的圖片文件,批量進行圖片壓縮處理,支持根據壓縮前與壓縮後的文件大小對比確認壓縮結果是否符合預期效果,節約圖片壓縮的時間成本。
3.__U銜募踩:圖片壓縮在線版對壓縮過程進行了多重加密處理,並且在壓縮完圖片文件的30分鐘後,便會將所有文件從服務器中永久刪除,期間無人能查閱或下載這些文件,讓妳的文件與隱私得到保障。
支持多種格式:圖片:支持JPG、PNG、GIF、BMP等圖片格式;視頻:支持MP4、MKV、MOV、AVI、WMV、M4V、MPEG等
視頻格式
;PDF:PDF文檔均可壓縮;Word:支持doc、docx等Word格式;PPT:支持ppt、pptx等PPT格式;
如何壓縮圖片保持清晰度1、可以使用壓縮軟件在確保清晰度的同時壓縮圖像。打開壓縮軟件,妳會發現頁面壓縮,視頻壓縮和PDF壓縮功能,點擊選擇圖像壓縮。
2、然後進入操作界面。添加需要壓縮的圖像。您可以單擊“添加文件”或“添加文件夾”按鈕壹次上載多個圖像。當然,您也可以將圖像直接拖放到操作界面中。
3、添加文件後,您可以選擇壓縮文件的壓縮選項。在添加的文件下方,有壹個減少優先級,正常壓縮和明確優先級。該軟件將默認為正常壓縮。我們需要保持圖像的清晰度。
4、選擇保存的路徑後,壓縮的圖像文件可以保存在原始文件夾中,也可以自定義保存的位置。壓縮成功後查看文件時可以找到它。
5、最後,單擊按鈕開始壓縮,即可實現圖像文件的壓縮。
6、等待壓縮完成後,您可以查看剛剛成功壓縮的文件。如果要快速查看文件,可以單擊按鈕在頁面上查看文件,然後單擊以查看文件。
7、當然,壓縮成功後,頁面還會顯示壓縮後的文件大小,可以與壓縮前的文件大小進行比較。我們可以清楚地看到圖像壓縮更小。