date: 2017/4/10 16:17:25
tags:
- Jcrop
- 預覽裁剪上傳頭像
最近用了Jcrop實現了一個上傳頭像的功能，在這里記錄一下，也希望能幫助到有需要的朋友。
對IE兼容性尚可，IE8和IE9不支持裁剪和預覽，IE9以上可正常使用。
直接上源碼:https://github.com/iftom/springmvcdemo_jcrop
下面是最終效果圖:
下面是一個說明書式的介紹，按照我的步驟一步步走下去，功能就可以實現。
上傳頭像本身沒有什么難點，但是加入了裁剪和預覽功能，涉及的前端問題比較多，我途中也踩了許多坑，如果你想快速見到效果，消除對一件未知的事情的焦慮的話，我建議你先把源碼下載下來，放到Tomcat里跑起來，看到真實的效果后，再著手開始寫自己的代碼。
詳細的原理內容將來會更新。
<strong>第零步------開始前的準備</strong>
在開始這個Demo之前，你必須已經具備以下條件:
- 可以正常訪問的SpringMVC或者SpringBoot項目
- 確保你的項目可以接受文件上傳,具體的配置可以參考代碼內的mvc-dispatcher-servlet.xml文件的末尾
- 一個上傳頭像的HTML原型頁面，如果沒有可以參考代碼內的頁面
- Jcrop的使用方式可參考代碼內的寫法，但是還請你仔細閱讀Jcrop官方的Demo和文檔
<strong>第一步------下載Jcrop相關文件</strong>
登錄Jcrop官網，下載最新的Jcrop版本(目前是v0.9.12)。
Jcrop的官網訪問速度可能很慢，不過一定能夠打開，加載的時候可以看看這個線上的中文版的Demo。
下載完后，把相關的css、js文件放到你的項目內并且在頁面上引入即可。
別忘了還有一張名為jcrop.gif的圖片。
<strong>第二步------編寫前端頁面</strong>
完整代碼請參考personalPhoto.jsp，這里只對幾個關鍵點說明一下。
1.因為各大瀏覽器的文件框的樣式不同，所以頁面上很少用到原生的<input type="file"/>來當做上傳文件的按鈕。而是把原生的文件框設置為透明（注意不是hidden隱藏），并且將其覆蓋在另一個普通的button按鈕上來完成樣式的統一。
file按鈕透明的css樣式:
#fcupload{ opacity:0;/* 透明，非IE */ filter:alpha(opacity=0);/* 透明，IE*/ position: absolute; top:123px; width:135px; font-size:29px; }
你可以通過top和left來調節file按鈕的位置，通過font-size來設置file按鈕的大小.
下面是兩張對比圖來直觀的感受效果:
2.如果你需要添加多個預覽圖，請參考uploadUserPhoto.css文件和personalPhoto.jsp頁面中的id的前綴為preview-pane的幾個標簽。
<strong>第三步------編寫后端代碼</strong>
完整代碼參考MainController.java
1.除了對圖片的大小和后綴名的驗證之外，你還需要驗證圖片是否是一張真正的圖片，而不是手動改過后綴名的一張偽造的圖片。方法是通過JAVA代碼獲取圖片的寬高，如果不能獲取到，則認為這是一張非法的圖片。代碼參考FileUploadUtil.java。（即使是一張真正的圖片，依然可以嵌入非法的代碼，這里沒有做更多的處理，日后更新。）
2.對圖片的裁剪，如果你沒有時間研究，直接復制ImgCut.java當做工具類使用即可。
3.為了方便Demo的展示，我把上傳的圖片的地址寫入了config.properties文件內，請根據自己實際情況修改存儲圖片地址的方式。
<strong>IE兼容性</strong>
- IE8和IE9對文件上傳支持不太友好，必須將
工具 -> Internet選項 -> 安全 -> 自定義級別 -> 找到“其他”中的“將本地文件上載至服務器時包含本地目錄路徑 打開，瀏覽器才能取到本地圖片的路徑。
<br />
如果你遇到了什么問題，歡迎聯系我，微信:15233639789
我的Hexo博客:http://wangxiaoyu.date
