結合Vue.js的前端壓縮圖片方案-js教程-PHP中文網

首頁

web前端

js教程

結合Vue.js的前端壓縮圖片方案

高洛峰

Nov 03, 2016 am 09:36 AM

這是一個很簡單的方案。嗯，是真的。

為什麼要這麼做?

在行動Web蓬勃發展的今天，有太多太多的應用需要讓用戶在行動Web上傳圖片檔案了，正因如此，我們有些困難必須去攻克：

低網速下上傳進度緩慢，使用者體驗差

高並發下，後台處理較大的上傳檔案壓力大

或許有更多...

在攻克上面的一些困難時，我們也可以給自己一些疑問：

真的有必要保存用戶上傳的原圖嗎?

用戶還能等多久?

或許還有更多...

結合上面的一些困難和疑問，再結合我們實際的案例，我們或許可以這樣做—— 在用戶上傳圖片時，圖片被提交到後台之前，就對圖片進行壓縮處理。圖片檔案大小減少後，上傳速度自然會提示，在同樣的並發下，後台處理的速度也會得到提升，使用者體驗得到提升。

有童鞋可能會說，為什麼不使用一些主流CDN的表單功能，直接把文件上傳到CDN去?當然，完全可以選擇那種方案，我只是在眾多的方案中選擇了一個來用而已，又或者說這是程式設計師的天性?

準備

上面已經說了“在用戶上傳圖片時，圖片被提交到後台之前，就對圖片進行壓縮處理。”，那我們馬上準備下各種工具吧：

localResizeIMG(核心，用於在前端壓縮圖片)

Vue.js(處理前端的數據，展現邏輯)

Bootstrap(還要我多說?)

變更後，使用localResizeIMG進行壓縮

把資料透過自己期望的方式提交到後台

localResizeIMG在呼叫時，就可以指定壓縮後圖片的寬度高度以及品質(詳細參考文件)，至於要怎麼把資料提交到後台，可以參考該函式庫的wiki中提到的方案，一切都很簡單。

演示地址

這個例子的倉庫地址

本文的解決方法並不是唯一，也不一定是最好，在使用相關的框架/庫時遇到的問題，可以去相應的Github倉庫查看issue或者wiki。

🎜🎜🎜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles