PHPcroppic裁剪图片插件

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

本文演示了croppic上传插件5个实例,包括在模态弹出层中裁剪、显示url后裁剪、预加载等。
PHPcroppic裁剪图片插件
分类:PHP > 上传 难易:中级
查看演示 下载资源: 540 下载资源 下载积分: 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() // 重置 -
评论18
头像

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

  • 头像 17楼
    11-06 22:57
    y***p
    这个挺好的,必须下载
  • 头像 16楼
    06-13 09:42
    天***空
    我也想试试,不错的啊!
  • 头像 15楼
    03-09 03:56
    y***p
    非常好 我也想试试。。
  • 头像 14楼
    12-08 14:14
    q***r
    这个跟还是有区别的.
  • 头像 13楼
    11-27 16:56
    I***帽
    很基础的功能啊
  • 头像 12楼
    11-21 19:57
    w***a
    很想要这个东东
  • 头像 11楼
    09-23 12:29
    f***o
    五个实例,很丰富,可供选择很多
  • 头像 10楼
    09-06 17:34
    x***0
    货真价实,价格公道
  • 头像 9楼
    09-05 08:46
    舒***畅
    挺好的效果效果
  • 头像 8楼
    06-12 08:27
    2***4
    本文演示了croppic上传插件5个实例,包括在模态弹出层中裁剪、显示url后裁剪、预加载等。
1 2