需求說(shuō)明

在城廂等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,城廂網(wǎng)站建設(shè)費(fèi)用合理。

簡(jiǎn)單來(lái)說(shuō)就是要實(shí)現(xiàn)用戶上傳頭像，并且要保存用戶裁切后的部分作為用戶頭像。

第一步，選擇圖片：

第二步，在彈窗頁(yè)面中展現(xiàn)并進(jìn)行裁切：

第三步，點(diǎn)擊“保存”，上傳服務(wù)器。

實(shí)現(xiàn)過(guò)程

說(shuō)來(lái)有點(diǎn)坎坷，相當(dāng)于做了2遍，走了彎路。

第1遍是用戶一選擇圖片，就進(jìn)行了上傳，然后返回一個(gè)地址，所以在彈層上展現(xiàn)的圖片已經(jīng)是服務(wù)器上的圖片了，然后進(jìn)行裁切，再保存。

第2遍找到的一個(gè)方法，是在第1遍做到裁切處理時(shí)候想到的，即彈層展現(xiàn)的是用戶機(jī)器上選擇的圖片，不用先上傳，但是用image/base64來(lái)展現(xiàn)的。這樣就與服務(wù)器少了一次交互啊，并且服務(wù)器不用存儲(chǔ)2遍圖片，還提高了彈層展現(xiàn)速度，體驗(yàn)更好，所以是極好的。

說(shuō)下碰到的主要技術(shù)點(diǎn)：

express框架不用多說(shuō)，就是保存的時(shí)候post一下裁切后的base64數(shù)據(jù)，后臺(tái)寫個(gè)對(duì)應(yīng)路由就好。
Jquery也不用多說(shuō)，頁(yè)面展現(xiàn)控制與ajax提交。

HTML5/FileReader/canvas，F(xiàn)ileReader用于將文件讀取為數(shù)據(jù),我們使用它的onLoad事件；canvas這個(gè)用作裁切移動(dòng)時(shí)，實(shí)時(shí)重繪裁切后的圖片（相當(dāng)于實(shí)時(shí)預(yù)覽，當(dāng)然我是隱藏了，調(diào)試的時(shí)候可以讓他display），可以隱藏，最后上傳的其實(shí)就是這個(gè)canvas的base64數(shù)據(jù)。

Jcrop plugin。這個(gè)是裁切插件，必須的了。下載與說(shuō)明在這里。
其他就是base64字符串保存成圖片了，這在服務(wù)端比較簡(jiǎn)單，直接用fs.writeFile(fileName,dataBuffer,function(err){});就好了。

具體代碼

view頁(yè)面，主要需要有一個(gè)上傳控件，還有定義彈窗div以及用于重繪裁切范圍圖片的canvas，當(dāng)然頁(yè)面要引用相應(yīng)的js插件和css等，主要：

 
 保存

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：node.js（express）中使用Jcrop進(jìn)行圖片剪切上傳功能-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/jddjj.html