基于web html5+js的圖片壓縮上傳技術研究

楊平

摘 要：能夠在上傳到服務器之前進行圖片壓縮處理，也就是在客戶端進行圖片的處理需求一直都在，對于原生APP來說，具有原生API，圖片處理很簡單，而對于B/S應用來說，沒有原生AIP的支持，處理圖片就變得有些棘手。就當前的技術發展來說，可以通過對算法的實現來解決圖片的壓縮，客戶端的解析能力并沒有想象中那么強大，算法的運行環境需要強的解析環境，同時，實現算法也會增加很大的代碼量。

關鍵詞：web2.0；javascript；圖片壓

1相關理論與技術介紹

1.1 Web技術

技術標準方面，2004年W3C期望發展是XHTML2.0，2009年W3C放棄了改進XHTML2.0的標準發展。當前W3C和WHATWG都在進行html5規范的修訂和發展。其中W3C致力于對html5的展示層面，包括很多新的元素的制定，WHATWG致力在開發的角度進行改進。移動Web應用使用Web技術來構建，用網頁語言（如HTML、JavaScript、Java等編程語言）進行撰寫，并通過網頁瀏覽器在互聯網或企業內部網上執行。

1.2 HTML5關鍵技術

HTML5有兩大特點：首先，強化了Web網頁的表現性能。其次，追加了本地數據庫等Web應用的功能。圖片在線處理功能的實現正是通過HTML5強化網頁表，追加的canvas標簽實現的，在開發圖片在線處理功能時，項目首先是通過HTML5技術實現的。HTML5圖片在線處理包括四大功能，剪裁、縮放、旋轉、水印。這些可以通過canvas標簽調用HTML5內置API分別實現。

1.3 XMLHTTPrequest 2.0

XMLHttpRequest（XHR）是一個API對象，其中的方法可以用來在瀏覽器和服務器端傳輸數據。這個對象是瀏覽器的js環境提供的。從XHR獲取數據的目的是為了持續修改一個加載過的頁面，XHR是Ajax設計的底層概念。XHR使用的協議不同于HTTP，不僅可以使用XML格式的數據，也支持JSON，HTML或者純文本。

2 Web前端圖片壓縮處理技術研究

2.1 前端操作的性能指標

正如項目前期無框架可言一樣，移動Web前端開發前期除了建立盡量完善的移動開發規范來避兔不必要的性能問題外，同樣無法過度追求性能優化。多數的前端性能優化方案來自于權衡的結果。因此，前端性能優化的工作往往放在應用開發到一定階段后開展，以及項目正式上線后定期進行維護。在對移動圖片社交Web應用進行前端性能優化之前，需要進行應用整體的性能測試，并根據性能測試分析結果制定優化方案加以應用。前端性能指標主要包括加載時間指標，資源情況指標和網絡連接指標。

2.2 基本原理

圖像數據之所以能被壓縮，就是因為數據中存在著冗余。圖像數據的冗余主要表現為：圖像中相鄰像素間的相關性引起的空間冗余；圖像序列中不同幀之間存在相關性引起的時間冗余；不同彩色平面或頻譜帶的相關性引起的頻譜冗余。數據壓縮的目的就是通過去除這些數據冗余來減少表示數據所需的比特數。由于圖像數據量的龐大，在存儲、傳輸、處理時非常困難，因此圖像數據的壓縮就顯得非常重要。

大體思路如下：

（1）利用FileReader，讀取blob對象，或者是file對象，將圖片轉化為data uri的形式。（2）使用canvas，在頁面上新建一個畫布，利用canvas提供的API，將圖片畫入這個畫布當中。（3）利用canvas.toDataURL（），進行圖片的壓縮，得到圖片的data uri的值。（4）上傳文件。

2.3 文件上傳方式

文件上傳有2種方式：

（1）將圖片轉化為base64：可以通過xhr ajax或者xhr2 FormData進行提交。

（2）將圖片數據轉為Blob對象，使用FormData上傳文件：Blob對象是無法注入到FormData對象當中的，當拿到了圖片的data uri數據后，將其轉化為Blob數據類型。

3 圖片壓縮功能實現過程

3.1 圖片預處理

在進行圖片壓縮前，還是對圖片大小做了判斷的，如果圖片大小大于200KB時，是直接進行圖片上傳，不進行圖片的壓縮，如果圖片的大小是大于200KB，則是先進行圖片的壓縮再上傳。

3.2 圖片轉換為canvas

基于HTML5 的圖片方法的基本思路是利用HTML5 的input[type=file] 組件選擇圖片，使用FileReader 對象讀取選中圖片數據，使用Canvas 標簽的DrawImage 方法將圖片剪裁到指定大小，使用Canvas 的toDataURL 方法按照指定質量將圖片數據轉換成Base64 編碼，最后，通過Ajax 異步通信，將圖片數據發送到服務器端，服務器端接收并保存圖片，從而實現圖片壓縮上傳。

3.3 canvas轉換為圖片數據格式

轉換 Canvas 為 Image，假設圖像已經在canvas上處理好，那么可以使用以下方法，把canvas轉變為圖片Image對象。

3.4 利用大對象進行數據傳輸數據

瀏覽選定照片后獲取上傳照片文件的大小，根據其大小開辟一塊內存空間用于將來存儲圖片對象， 然后將上傳的照片文件讀取到字節數組中，繼而轉換成二進制流的形式，并賦值給一個會話（Session）對象。

從會話（Session）對象中將二進制流形式的圖片賦值給字節變量，然后將該字節變量再賦值給插入語句的參數，最后通過執行插入語句實現媒體資料的存儲。

首先，創建一個文件用以獨立顯示檢索的圖片，在該文件中編寫查詢語句將圖片檢索出來，檢索結果存入到數據表中。如果檢索結果不為空，則將該圖片返回到下一步的結果中。其次， 在瀏覽頁面中編寫查詢語句實現圖片各個信息的檢索，對于圖片內容應用帶參數鏈接的方式與上一步檢索出的結果聯系起來，最終實現圖片在頁面的瀏覽。

3.5 壓縮方法的實現

（1）頁面添加文件選擇組件

（2）監聽文件組件的change 事件并讀取圖片內容

（3）圖片壓縮及調用

（4）異步上傳：壓縮后的圖片通過JQuery實現異步上傳。

（5）服務器端保存

4結論

基于HTML5 的Canvas 對象對圖片進行壓縮的方法，適用于手機的移動網站和各類移動應用的開發，對增強用戶體驗，減輕服務器壓力有一定的實際意義。Web技術已經深入人們日常生活的方方面面，其中對HTML5安全性的研究具有重要的現實意義。BLOB 存儲格式同C#代碼相結合， 將圖像資料轉換成二進制流存入數據庫，調用時再將二進制流還原成原始文件，很好地實現了圖像資料的存儲和讀取， 解決了常規數據格式無法處理的問題，從而保證了相關專業軟件的順利應用。此外，BLOB 存儲技術不僅可以應用于圖像資料，對于音頻、視頻等資料也同樣適用。以HTML5為代表的移動Web技術尚處于發展的初級階段，標準本身在向不斷完善和改進空間演進，且相比本地應用移動智能終端仍存在執行HTML5效率低、設備調用能力受限、能耗較大等問題，都影響著移動Web應用的體驗。

參考文獻：

[1]鄒紹武，蘇貴斌.Android應用開發中圖片壓縮技術的研究應[J].計算機技術， 2014（1）：17.

[2]馬建華，楊波.C/S與B/S結構中BLOB類型數據的應用[J].計算機應用，2015（14）：4-5.