想要裁剪圖片上傳：
需要依賴的的插件為：
[jquery.photoClip.js] 插件
[iscroll-zoom.js] 插件
[hammer.js] 插件
[lrz.all.bundle.js] 插件
[jquery-2.1.3.min.js]
在前端頁面調取：
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [260, 260], // 截取框的寬和高組成的數組。默認值為[260,260]
outputSize: [640, 640], // 輸出圖像的寬和高組成的數組。默認值為[0,0]，表示輸出圖像原始大小
//outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認為 "jpg"
file: "#file", // 上傳圖片的<input type="file">控件的選擇器或者DOM對象
view: "#view", // 顯示截取后圖像的容器的選擇器或者DOM對象
ok: "#clipBtn", // 確認截圖按鈕的選擇器或者DOM對象
loadStart: function(file) {}, // 開始加載的回調函數。this指向 fileReader 對象，並將正在加載的 file 對象作為參數傳入
loadComplete: function(src) {}, // 加載完成的回調函數。this指向圖片對象，並將圖片地址作為參數傳入
loadError: function(event) {}, // 加載失敗的回調函數。this指向 fileReader 對象，並將錯誤事件的 event 對象作為參數傳入
clipFinish: function(dataURL) {}, // 裁剪完成的回調函數。this指向圖片對象，會將裁剪出的圖像數據DataURL作為參數傳入
});
</script>