croppic.js 图像截取
一个功能强大的jquery图像裁剪插件
croppic支持以下浏览器，包括chrome,firefox、IE、safari和opera
在线实例
使用方法
#cropContainerHeader {
width: 200px;
height: 150px;
position:relative; /* or fixed or absolute */
}<div id="yourId"></div>
var cropperOptions = {
uploadUrl: 'path_to_your_image_proccessing_file.php'
}
var cropperHeader = new Croppic('yourId', cropperOptions);参数详解
| 参数 | 描述 | 默认值 |
| uploadUrl | 上传URL | - |
| uploadData | 上传数据 uploadData:{ "dummyData":1, "dummyData2":"text" } | - |
| cropUrl | 裁剪url cropUrl:'path_to_your_image_cropping_file.php' | - |
| cropData | 裁剪数据 cropData:{ "dummyData":1, "dummyData2":"text" } | - |
| 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() // 重置 | - |
云盘内容
| 文件 | jQuery插件大全打包 |
| 内容 | HTML5+CSS3+PHP+jQuery等示例 |
| 大小 | 170M（300+个文件） |
注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。