dd

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-
callbacksvar 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) } }-
METHODScropper.destroy() // 销毁所有控制按钮功能   cropper.reset() // 重置-

云盘内容


 jQuery插件大全打包

HTML5+CSS3+PHP+jQuery等示例
大小
170M(300+个文件)

注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。

下载地址