( 在一个模态对话框中打开 )
( 裁剪后显示URL )
( 无背景图 )
( 定义显示哪些工具 )
( 如果图片已经可用 )
最简单的实现。注意，您必须提供容器的宽度和高度，依赖jQurey。
手机扫码预览
var cropperHeader = new Croppic('yourId');
<div id="yourId"></div>
#cropContainerHeader {
width: 200px;
height: 150px;
position:relative; /* or fixed or absolute */
}
接收处理上传文件的路径
var cropperOptions = {
uploadUrl:'path_to_your_image_proccessing_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
您将通过AJAX POST方法以multipart / form-data形式接收图像文件；
（请注意，ajax仅限于相同的域请求）
成功保存图像后，必须返回以下json。
（限制最大缩放所需的图像宽度和高度，因此图像不会模糊不清。）
{
"status":"success",
"url":"path/img.jpg",
"width":originalImgWidth,
"height":originalImgHeight
}
发生错误时的响应
{
"status":"error",
"message":"your error message text"
}
您要发送到图像上传处理文件的其他数据
var cropperOptions = {
uploadUrl:'path_to_your_image_proccessing_file.php',
uploadData:{
"dummyData":1,
"dummyData2":"text"
}
}
var cropperHeader = new Croppic('yourId', cropperOptions);
图片裁剪处理文件的路径。
var cropperOptions = {
cropUrl:'path_to_your_image_cropping_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
您将通过AJAX POST方法接收以下数据作为multipart / form-data；
（请注意，ajax仅限于相同的域请求）
imgUrl // 您的图片路径（成功上传后我们收到的图片路径） imgInitW // 图片的原始宽度（上传后我们收到的宽度） imgInitH // 图片的原始高度（上传后我们收到的高度） imgW // 您新缩放的图像宽度 imgH // 您新缩放的图像高度 imgX1 // 裁剪图像相对于缩放图像的左上角 imgY1 // 裁剪图像相对于缩放图像的左上角 cropW // 裁剪的图像宽度 cropH // 裁剪的图像高度下载PHP示例文件
成功保存图像后，必须返回以下json。
（限制最大缩放所需的图像宽度和高度，因此图像不会模糊不清。）
{
"status":"success",
"url":"path/croppedImg.jpg"
}
错误响应示例
{
"status":"error",
"message":"你打算给用户的错误提示信息"
}
您要发送到图像裁剪处理文件的其他数据
var cropperOptions = {
customUploadButtonId:'path_to_your_image_proccessing_file.php',
cropData:{
"dummyData":1,
"dummyData2":"text"
}
}
var cropperHeader = new Croppic('yourId', cropperOptions);
加载服务器上已经存在的图片
var cropperOptions = {
cropUrl:'path_to_your_image_cropping_file.php',
loadPicture:'你的图片路径url'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
doubleZoomControls为10 * zoomFactor缩放添加了两个额外的缩放控件（默认为true）
zoomFactor缩放图像以像素为单位的值（默认为10）
rotateControls为左右旋转添加两个额外的旋转控件（默认为true）
rotationFactor旋转图像为值的默认值（默认为5）
var cropperOptions = {
zoomFactor:10,
doubleZoomControls:true,
rotateFactor:10,
rotateControls:true
}
var cropperHeader = new Croppic('yourId', cropperOptions);
成功裁剪图像后，将裁剪的图片url设置为ID为“outputUrlId”的输入框的值
<input type="text" id="myOutputId">
var cropperOptions = {
outputUrlId:'myOutputId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
如果您想要一个自定义上传图片按钮，就像第一个示例那样 here
var cropperOptions = {
customUploadButtonId:'myDivId'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
如果要在模态窗口中打开裁剪（默认为false）
var cropperOptions = {
modal:true
}
var cropperHeader = new Croppic('yourId', cropperOptions);
如果要在模式窗口中打开裁切（默认为false）
“裁切div”必须包含“ LOADER”类
var cropperOptions = {
loaderHtml:'<img class="loader" src="loader.png" >'
}
var cropperHeader = new Croppic('yourId', cropperOptions);
如果要使用Javascript（Filereader）而不是服务器端来处理初始Fileupload（默认为false）
并非所有浏览器都支持FILEREADER API：支持IE10 +示例
7
var cropperOptions = {
processInline:true,
}
var cropperHeader = new Croppic('yourId', cropperOptions);
显示当前img缩放的透明图像
提示：为防止布局中断，请将裁纸器的父div设置为 "overflow":"hidden"
var cropperOptions = {
imgEyecandy:true,
imgEyecandyOpacity:0.2
}
var cropperHeader = new Croppic('yourId', cropperOptions);
一些回调（打开控制台，可以观察输出裁剪器示例 )
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);
var cropper = new Croppic('yourId', cropperOptions);
cropper.destroy() // no need explaining here :)
cropper.reset() // destroys and then inits the cropper