PHPcroppic裁剪图片插件

来源:https://www.sucaihuo.com/js/480.html 2015-09-05 15:33浏览(5995) 收藏

本文演示了croppic上传插件5个实例,包括在模态弹出层中裁剪、显示url后裁剪、预加载等。
PHPcroppic裁剪图片插件
分类:PHP > 上传 难易:中级
下载资源 下载积分: 120 积分

HTML

裁剪区域HTML代码

<div id="yourId"></div>

CSS

#cropContainerHeader {
    width: 200px;
    height: 150px;
    position:relative; /* or fixed or absolute */
}

设置上传路径,并且实例化cropper插件

var cropperOptions = {
    uploadUrl: 'path_to_your_image_proccessing_file.php'
}

var cropperHeader = new Croppic('yourId', cropperOptions);

cropper图片裁剪中文API

参数 描述 默认值
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() // 重置 -
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2