『壹』 前端把圖片壓縮轉換成base64編碼把值賜予input='hidden' 之後提交給後台. HTML5,PHP,Javascript,canvas
缺點你無法直接驗證傳來的base64數據的完整性，比如大小，文件頭之類的，還需要自己來實現。
『貳』 實現一個壓縮圖片功能
在尋找在線圖片壓縮工具時，我推薦熊貓壓縮，它為我提供了靈感。我根據其方法，自行實現了一個圖片壓縮功能。壓縮過程的核心在於運用HTML5的canvas元素，通過結合`toDataURL`和`toBlob`方法，用戶可以選擇圖片質量，而非直接設定大小百分比。關於具體計算方式，可以參考MDN文檔深入理解。我原計劃分享代碼，但最終建議直接查看GitHub以獲取完整實現。
需要注意的是，`toDataURL`和`toBlob`原本都能實現壓縮。`toDataURL`轉成Base64後，還需轉為Blob進行下載。盡管`toBlob`理論上性能更好，但在實際應用中，由於我沒有限制圖片數量和大小，當圖片數量增多時，瀏覽器內存溢出，導致問題。相比之下，`toDataURL`在性能和穩定性上表現更佳。代碼中我同時實現了兩個方法，供你嘗試。
至於下載功能，我提供了兩種選項：單獨下載和批量下載。單獨下載部分，我參考了一些資源，使用模擬的a鏈接點擊即可實現。批量下載則利用了jszip和file-saver庫，它們之間的配合使用相對簡單。jszip依賴file-saver，但npm文檔中並未明確說明內部實現，我在使用時需要額外安裝和引用，但並未進行深入實驗。