《jquery photoClip支持手機端裁剪的本地裁剪圖片后上傳插件》要點：
本文介紹了jquery photoClip支持手機端裁剪的本地裁剪圖片后上傳插件，希望對您有用。如果有疑問，可以聯系我們。
相關主題：HTML和JS入門 / JS、Jquery插件
圖片上傳前裁剪，現有好幾款插件，不過支持手機，PC最好的是jquery photoClip插件。
這個插件外面流傳至少2個版本，其中一個是不支持調整寬高，固定正方形。這款從這里下載：
https://github.com/baijunjie/PhotoClip.js
這里推薦這款：https://github.com/topoadmin/photoClip 可以調整寬高，
注意，示例中用到了amazeui.min.js插件，這個是非必須的，它是一個框架JS，在使用時不要只會抄。增加了頁面大小。
下面是API摘要，具體見：https://github.com/topoadmin/photoClip/blob/master/docs/api.md
| 選項 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| width | Int | 200 | 裁剪框寬 |
| height | Int | 200 | 裁剪框高 |
| fileMinSize | Int | 20 | 圖片質量最小值(kb) |
| defaultImg | String | '圖片路徑' | 初始圖片路徑（未完善） |
| file | dom | null | (必須) file按鈕 |
| ok | dom | null | (必須) 確定裁剪按鈕 |
| outputType | String | 'jpg' | 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認為 "jpg" |
| strictSize | Boolean | false | 是否嚴格按照截取區域寬高裁剪。默認為false，表示截取區域寬高僅用于約束寬高比例。如果設置為true，則表示截取出的圖像寬高嚴格按照截取區域寬高輸出。 |
| customOutput | Boolean | false | 自定義選擇完畢輸出，不執行內部填充函數 |
| loadStart | Function | null | 開始加載的回調函數。this指向 fileReader 對象，并將正在加載的 file 對象作為參數傳入。 |
| loadProgress | Function | null | 加載中的回調,傳入參數 加載百分比 |
| loadComplete | Function | null | 加載完成的回調函數。this指向圖片對象，并將圖片地址作為參數傳入。 |
| loadError | Function | null | 加載失敗的回調函數。this指向 fileReader 對象，并將錯誤事件的 event 對象作為參數傳入。 |
| clipFinish | Function | null | 裁剪完成的回調函數。this指向圖片對象，會將裁剪出的圖像數據DataURL作為參數傳入。 |
| formatError | Function | null | 圖片格式錯誤 |
| imgSizeMin | Function | null | 圖片質量小于設置范圍時回調 |
可以回調函數clipFinish用于接收裁剪完后，用$.post上傳到服務器保存。
轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/70.html
