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