本文演示了croppic上传插件5个实例，包括在模态弹出层中裁剪、显示url后裁剪、预加载等。
淘建站为您提供更多_上传文件_放大_缩小，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 289 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
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() // 重置 | - |
