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

楊平

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

關(guān)鍵詞：web2.0；javascript；圖片壓

1相關(guān)理論與技術(shù)介紹

1.1 Web技術(shù)

技術(shù)標(biāo)準(zhǔn)方面，2004年W3C期望發(fā)展是XHTML2.0，2009年W3C放棄了改進XHTML2.0的標(biāo)準(zhǔn)發(fā)展。當(dāng)前W3C和WHATWG都在進行html5規(guī)范的修訂和發(fā)展。其中W3C致力于對html5的展示層面，包括很多新的元素的制定，WHATWG致力在開發(fā)的角度進行改進。移動Web應(yīng)用使用Web技術(shù)來構(gòu)建，用網(wǎng)頁語言（如HTML、JavaScript、Java等編程語言）進行撰寫，并通過網(wǎng)頁瀏覽器在互聯(lián)網(wǎng)或企業(yè)內(nèi)部網(wǎng)上執(zhí)行。

1.2 HTML5關(guān)鍵技術(shù)

HTML5有兩大特點：首先，強化了Web網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。圖片在線處理功能的實現(xiàn)正是通過HTML5強化網(wǎng)頁表，追加的canvas標(biāo)簽實現(xiàn)的，在開發(fā)圖片在線處理功能時，項目首先是通過HTML5技術(shù)實現(xiàn)的。HTML5圖片在線處理包括四大功能，剪裁、縮放、旋轉(zhuǎn)、水印。這些可以通過canvas標(biāo)簽調(diào)用HTML5內(nèi)置API分別實現(xiàn)。

1.3 XMLHTTPrequest 2.0

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

2 Web前端圖片壓縮處理技術(shù)研究

2.1 前端操作的性能指標(biāo)

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

2.2 基本原理

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

大體思路如下：

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

2.3 文件上傳方式

文件上傳有2種方式：

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

（2）將圖片數(shù)據(jù)轉(zhuǎn)為Blob對象，使用FormData上傳文件：Blob對象是無法注入到FormData對象當(dāng)中的，當(dāng)拿到了圖片的data uri數(shù)據(jù)后，將其轉(zhuǎn)化為Blob數(shù)據(jù)類型。

3 圖片壓縮功能實現(xiàn)過程

3.1 圖片預(yù)處理

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

3.2 圖片轉(zhuǎn)換為canvas

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

3.3 canvas轉(zhuǎn)換為圖片數(shù)據(jù)格式

轉(zhuǎn)換 Canvas 為 Image，假設(shè)圖像已經(jīng)在canvas上處理好，那么可以使用以下方法，把canvas轉(zhuǎn)變?yōu)閳D片Image對象。

3.4 利用大對象進行數(shù)據(jù)傳輸數(shù)據(jù)

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

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

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

3.5 壓縮方法的實現(xiàn)

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

（2）監(jiān)聽文件組件的change 事件并讀取圖片內(nèi)容

（3）圖片壓縮及調(diào)用

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

（5）服務(wù)器端保存

4結(jié)論

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

參考文獻：

[1]鄒紹武，蘇貴斌.Android應(yīng)用開發(fā)中圖片壓縮技術(shù)的研究應(yīng)[J].計算機技術(shù)， 2014（1）：17.

[2]馬建華，楊波.C/S與B/S結(jié)構(gòu)中BLOB類型數(shù)據(jù)的應(yīng)用[J].計算機應(yīng)用，2015（14）：4-5.