web app開發中會有很多圖片上傳的應用場景，而現在的圖片很多是由手機拍攝的，隨著手機畫素的增大，現在一般手機拍攝的圖片都是幾M的大小，如果直接上傳，在網速差的情況下上傳時間是個很大的問題，而且使用者在檢視時一個頁面就載入好多張幾M大小的圖片，而現在的流量資費相對不那麼便宜。對於使用者清晰度要求不那麼高的圖片，我們應該要提供壓縮功能，這才能對使用者更加友好。

  圖片壓縮，我採用的是HTML5中的canvas（畫布）功能，這個功能的具體用法可以從w3csool中學習，連結在下http://www.w3school.com.cn/html5/html_5_canvas.asp

  在上一篇博文中，我寫了一個圖片上傳預覽的HTML，我們可以直接修改那次的程式碼就好了。

  因為使用者有時就是想用原來的圖片，所以我們新增radio標籤，提供“原圖”和“壓縮圖”的選項供使用者選擇。

  話不多說，上程式碼！

這是html部分的程式碼，所得到的顯示效果是這樣的：

下面來看看JS部分的程式碼：

如何獲得上傳圖片的url在上篇博文中已經講過這裡就不贅述了，這裡主要的思路就是將上傳的圖片放到一個隱藏的div中，根據使用者選擇“原圖”還是“壓縮圖”在圖片預覽的

div中進行顯示。

顯示原圖就直接把獲得的原圖url給到預覽圖img標籤的src就可以了，我們來說說壓縮圖部分。

繪製壓縮圖封裝在drawCompressionPicture這個函式中，

var preview_canvas = document.getElementById("previewCanvas");
var preview_ctx = preview_canvas.getContext("2d");

這兩句是找到id為previewCanvas的畫布，並對這個畫布生成一支名為preview_ctx的畫筆。

最關鍵的就是preview_ctx.drawImage(image, 0, 0, 260, height);這條語句，它的意思是將image這個影象畫到畫布中，並確定畫的起點和長寬，這裡我是以0,0為其始，也就是這個畫布的左上角頂點開始畫，寬為260，高為height，這裡var height = image.height / (image.width / 260);就保證了畫出的圖它的長寬比是沒有變的，圖片就不會變形。

下面我們來看看效果：

原圖：

壓縮圖：

我們把兩張圖片儲存下來看看圖片大小：

可以看出圖片壓縮了1/3，各位可以自行調節preview_ctx.drawImage(image, 0, 0, 260, height)的引數得到自己想要的尺寸和壓縮比，這也是得到統一尺寸圖片的一種方法。

最後，得到了壓縮圖如何上傳到伺服器呢，我們用

var image_data = preview_canvas.toDataURL("image/png");

這條語句可以得到畫布中圖片的編碼，我們用alert(image_data)；可以看得編碼：

這並不是標準的二進位制編碼，而是base64編碼，這個上傳到伺服器中可以用相應的base64解碼得到二進位制檔案存到資料庫中，也可以轉成圖片存在資料夾中。

我是用python寫後臺，插入的庫為：

import base64

用image = base64.b64decode(image_data)語句就可以得到相應的二進位制資料了，其它語言的後臺也有相應的方法，大家自行谷歌了～

接下來的博文可能會和大家分享下圖片如何存到資料庫中，一起學習，歡迎拍磚～