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