html5 canvas 前端生成縮略圖

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/