Croppic圖片裁切插件中文API幫助文檔

本文轉自http://www.uedsc.com/croppic-api.html，感謝原做者的翻譯。

uploadUrl

因爲裁切圖片是經過服務端的動態編程語言處理的，因此在初始化插件的時候，咱們能夠給他設置圖片上傳的路徑，而後處理成功之後經過返回的數據來顯示裁切之後的圖片。

JavaScript代碼

在初始化Croppic的時候設置上傳路徑參數；

var cropperOptions = {
    uploadUrl:'path_to_your_image_proccessing_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

插件經過AJAX POST的方法上傳圖片，經過設置表單爲multipart/form-data數據類型，注意AJAX請求不能跨域，這也是爲了安全。

 Download php example file

裁切圖片成功之後，你必須返回一下的JSON數據，限制最大縮放的圖像寬度和高度，因此圖像不出現模糊。

{
    "status":"success",
    "url":"path/img.jpg",
    "width":originalImgWidth,
    "height":originalImgHeight
}

若是裁切圖片失敗，你須要返回一下JSON數據，方便告訴Croppic處理異常。

{
    "status":"error",
    "message":"your error message text"
}

uploadDate

若是你須要發送額外的數據到服務器，你能夠使用uploadDate參數

var cropperOptions = {
    uploadUrl:'path_to_your_image_proccessing_file.php',
    uploadData:{
        "dummyData":1,
        "dummyData2":"text"
    }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

cropUrl

這個參數設置你處理圖片的腳本地址，這個參數有別於uploadUrl，雖然使用方法相同的。

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

使用了這個參數，你將接收到下面的multipart/form-data數據類型。

• imgUrl // your image path (the one we recieved after successfull upload)
• imgInitW // your image original width (the one we recieved after upload)
• imgInitH // your image original height (the one we recieved after upload)
• imgW // your new scaled image width
• imgH // your new scaled image height
• imgX1 // top left corner of the cropped image in relation to scaled image
• imgY1 // top left corner of the cropped image in relation to scaled image
• cropW // cropped image width
• cropH // cropped image height

成功後的圖像保存，你必須返回如下JSON，圖像的寬度和高度要求限制最大變焦，因此圖像不出來模糊。

{
    "status":"success",
    "url":"path/croppedImg.jpg"
}

若是裁切圖片失敗，你須要返回一下JSON數據，方便告訴Croppic處理異常。

{
    "status":"error",
    "message":"your error message text"
}

cropData

額外的數據要發送給您的圖像分割處理文件

var cropperOptions = {
    customUploadButtonId:'path_to_your_image_proccessing_file.php',
    cropData:{
        "dummyData":1,
        "dummyData2":"text"
    }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

preloadImage

載入已存在服務器上的圖像

var cropperOptions = {
    cropUrl:'path_to_your_image_cropping_file.php',
    loadPicture:'path-to-your-image'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

defineControls

defineControls能夠設置對圖片的精確控制，有幾個參數是能夠設置的：

• doubleZoomControls 增長10×zoomFactor放大兩個額外的縮放控件（默認爲true）
• zoomFactor 縮放圖像的像素的值（默認爲10）
• rotateControls 添加兩個額外的旋轉控制左、右旋轉（默認爲true）
• rotateFactor 旋轉圖像的值（默認爲5）

var cropperOptions = {
    zoomFactor:10,
    doubleZoomControls:true,
    rotateFactor:10,
    rotateControls:true            
}
var cropperHeader = new Croppic('yourId', cropperOptions);

outputUrlId

成功的圖像裁剪裁剪後，在頁面上顯示處理事後的Image圖片的URL，經過設置一個ID找到頁面上的輸入框。

<input type="text" id="myOutputId">

JavaScript代碼

var cropperOptions = {
    outputUrlId:'myOutputId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

customUploadButtonId

若是你想自定義上傳裁切圖片的按鈕，你能夠設置這個參數，傳遞一個按鈕的ID

var cropperOptions = {
    customUploadButtonId:'myDivId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

modal

若是你想在模態窗口中打開裁剪（默認是false）

var cropperOptions = {
    modal:true
}
var cropperHeader = new Croppic('yourId', cropperOptions);

loaderHtml

果你想在模態窗口中打開裁剪（默認是false），包裹的DIV的類必須設置爲「LOADER」。

var cropperOptions = {
    loaderHtml:'<img class="loader" src="loader.png" >'
}
var cropperHeader = new Croppic('yourId', cropperOptions);

processInline

若是你想在JavaScript處理初始FileUpload（有）而不是在服務器端（默認爲false），不是全部的瀏覽器支持的API的例子有：IE10 +支持。

var cropperOptions = {
    processInline:true,
}
var cropperHeader = new Croppic('yourId', cropperOptions);

imgEyecandy options

透明圖像顯示當前IMG變焦，提示：爲了防止佈局打破，須要給父級裁切的DIV盒子設置 overflow:hidden

var cropperOptions = {
    imgEyecandy:true,
    imgEyecandyOpacity:0.2
}
var cropperHeader = new Croppic('yourId', cropperOptions);

CALLBACKS

一些回調函數（打開你的控制檯輸出的混亂和觀看）。

var cropperOptions = {
    onBeforeImgUpload:     function(){ console.log('onBeforeImgUpload') },
    onAfterImgUpload:     function(){ console.log('onAfterImgUpload') },
    onImgDrag:        function(){ console.log('onImgDrag') },
    onImgZoom:        function(){ console.log('onImgZoom') },
    onBeforeImgCrop:     function(){ console.log('onBeforeImgCrop') },
    onAfterImgCrop:        function(){ console.log('onAfterImgCrop') },
    onReset:        function(){ console.log('onReset') },
    onError:        function(errormsg){ console.log('onError:'+errormsg) }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

METHODS

Croppic提供了一些方法

var cropper = new Croppic('yourId', cropperOptions);
cropper.destroy()     // no need explaining here :) 
cropper.reset()     // destroys and then inits the cropper