背景：
當前主流的圖片剪裁主要有兩種實現方式。
1：flash操作剪裁。2：利用js和dom操作剪裁。
目前看來這個剪裁主要還是先通過前端上傳圖片到服務器，然后前端操作后把一些坐標和大小數據傳到后台，
然后后台來執行剪裁。我一直覺得這樣有很多問題：
1.必須要先把圖片上傳到服務器然后才能執行后面的操作
2.前后端交互太多，需要幾次交互數據
老的實現方法太low了。我想試試canvas來實現剪裁，就網上搜索了下，是有一些canvas剪裁，類似Jcrop這種。但是我發現好多canvas的插件，
本質還是需要先上傳到后台，最后還是后端剪裁，和之前的方式一樣，只是用了canvas而已。
自己實現前端剪裁一步到位：
后來我就想了想canvas能存儲base64，就用base64傳到后端。
大致思路是這樣的：
-> 表單選擇圖片
-> 讀取圖片，用FileReader獲取到原圖的base64碼
-> new 一個image，把base64傳給src，然后就可以用這個對象
-> 需要兩個canvas，一個canvas是完整的在下層，一個canvas是我們要剪裁的區域在上層
（因為canvas不能分層，兩個重疊的canvas，下層那個canvas保持不動，上層顯示我們要剪裁的區域）
如圖：黑色透明的是下層的原圖，箭頭指向的是上層顯示區域。
-> 上圖的剪裁區域可以移動和放大，點擊保存就會再用一個canvas把剪裁區域 按照原圖大小畫出來，最后把canvas對象用toDataURL()獲取為base64碼，就可以上傳了。
實現起來有一些技術點：
1.可以自定義 剪裁的圖片的比例和最小尺寸，比如下面，設置了原圖的寬高必須大於640px，同時剪裁的比例也始終為width ：height，當前就是1:1
this._option.crop_min_width = 640; this._option.crop_min_height = 640;
2.可以自定義 剪裁的容器大小，比如，你只希望它在某個小區域里執行剪裁，設置了這個大小后，會按照正確的比例，把原圖縮放在這個容器里供用戶操作
this._option.crop_box_width = 300; this._option.crop_box_height = 200;
3. 實現顯示區域的拖動和顯示區域的大小改變。
4. 需要給剪裁容器包括里面的節點都添加上css3屬性 user-select:none。否則會出現拖動的canvas的bug
-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none
代碼寫得很亂，封裝的也不好，但是實現了想要的功能，點擊保存會顯示剪裁的圖片按照原圖比例，獲取到的base64碼會在控制台里打印出來。
默認要選擇640*640以上的圖片，以下是git地址，拉下來試試吧，也許這個方案是一個非常好的方式。
github地址 https://github.com/zimv/zmCanvasCrop