html5 canvas 前端產生縮圖

標籤：des   style   blog   class   c   ext   

html5 canvas 前端產生縮圖

更新: 
2013/08/01: 解決了後面遇到的bug: 圖片被壓扁(IOS6); 圖片被旋轉; 
整個源碼放在: https://github.com/kairyou/html5-make-thumb 
新方案需要後面實現的, 就是下面的舊版本裡的功能(浮水印/是否強制展開以適應目尺規寸等功能).

w3ctech長沙站交流會, 裡面分享的PPT: http://www.slideshare.net/99leon/html5-create-thumbnail

之前有bug的版本放在分支old裡(不推薦使用), 請使用更新的方案~

2013/01/07:
11年做的公司的移動頁面, 上傳圖片時縮圖是靠後端產生, 但是隨著現在的手機越來越牛X(網路攝影機比數位相機還厲害~), 圖片體積也越來越大.
一個幾M的圖, 也許我們只是用來產生一個100*100的小圖, 上傳到後端再產生縮圖就大大的浪費了, 而且提交表單的等待時間也非長久, 對使用者體驗也不好.
普通的web表單, 上傳圖片靠後端來產生縮圖很平常, 但有了HTML5, 針對移動Web開發可以考慮使用前端產生縮圖了.

寫了個產生縮圖的jquery的外掛程式, 主要參數:

1. width:產生縮圖的寬; height:產生縮圖的高;
2. fill:圖片小於縮圖尺寸時,是否填充(false:縮圖寬高自動縮放到適應圖片,true:縮圖尺寸不變)
3. background:產生圖片填充背景(預設#fff, 設定null時, 背景透明)
4. type:產生圖片類型(‘image/jpeg‘或‘image/png‘)
5. size:產生縮圖方式,產生縮圖的效果主要參考了CSS3的background-size屬性:
6.   contain:等比縮放並展開,圖片全部顯示;
7.   cover:等比縮放並展開,圖片把容器完全覆蓋;
8.   auto:圖片不展開,置中顯示.
9. mark:浮水印
10.   文字浮水印: mark ={padding:5, height:18, text:‘test‘, color:‘#000‘, font:‘400 18px Arial‘}
11.   圖片浮水印: mark ={padding:5, src:‘mark.png‘, width:34, height:45};
12. stretch:小圖是否強制展開以適應縮圖的尺寸(size =auto/contain時)
13. success:產生縮圖後 callback

大體思路如下:
首先判斷是否支援fileReader(支援fileReader, canvas就不在話下了)
不支援的話: 不做任何操作, 預設的input type="file"上傳, 靠後端產生縮圖.
支援的情況: input change時, 判斷選擇的檔案是圖片, 就建立一個隱藏的canvas, 並把圖片畫到canvas裡,
因為要產生縮圖, 所以在canvas裡畫圖的時候, 控制剪下座標和被剪下的寬高就OK了.
另外可以加上浮水印, 圖片浮水印或者文字浮水印加到canvas上面也是比較方便的.
最後 canvas.toDataURL 轉成base64, post到後端(先把input type="file"移除, 再產生個新的input type="hidden"儲存圖片資料), 後端接收後直接儲存為圖片就OK了.
主要用到: FileReader和canvas, 一個用來讀取本地圖片, 一個用來產生縮圖.

做移動網頁開發的同學可以考慮下.

轉自：http://www.fantxi.com/blog/archives/create-thumbnail-images-html5/