PHPcroppic裁剪图片插件

本文演示了croppic上传插件5个实例，包括在模态弹出层中裁剪、显示url后裁剪、预加载等。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：PHP > 上传难易：中级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

裁剪区域HTML代码

<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);

参数	描述	默认值
uploadUrl	上传URL	-
uploadData	上传数据 uploadData:{	-
cropUrl	裁剪url cropUrl:'path_to_your_image_cropping_file.php'	-
cropData	裁剪数据 cropData:{	-
preloadImage	预加载图片 loadPicture:'path-to-your-image'	-
defineControls	定义控制按钮 var cropperOptions = { zoomFactor:10, doubleZoomControls:true, rotateFactor:10, rotateControls:true }	-
outputUrlId	成功裁剪图像的url ID	-
customUploadButtonId	自定义上传按钮 customUploadButtonId:'myDivId'	-
modal	是否模态框弹出层显示 modal:true	-
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) } }	-
METHODS	cropper.destroy() // 销毁所有控制按钮功能 cropper.reset() // 重置	-

PHPcroppic裁剪图片插件 收藏