( 在一个模态对话框中打开 )
( 裁剪后显示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”类 b>
var cropperOptions = { loaderHtml:'<img class="loader" src="loader.png" >' } var cropperHeader = new Croppic('yourId', cropperOptions);
如果要使用Javascript(Filereader)而不是服务器端来处理初始Fileupload(默认为false)
并非所有浏览器都支持FILEREADER API:支持IE10 +示例 b>
7 var cropperOptions = { processInline:true, } var cropperHeader = new Croppic('yourId', cropperOptions);
显示当前img缩放的透明图像
提示: b>为防止布局中断,请将裁纸器的父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