Cropper.js实现裁剪图片并上传(PC端)-创新互联

由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器，所以上网查询了很多资料，也试用了许多案例，发现cropper插件裁剪是比较完善的，所以结合之前的使用情况，编写了此案例。本案例是参考cropper站点实例，进行修改简化。

创新互联主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务瓯海,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

option相关参数说明：

viewMode 显示模式

Type: Number
Default: 0
Options:
0: the crop box is just within the container 裁剪框只能在 1内移动
1: the crop box should be within the canvas 裁剪框 只能在 2图片内移动
2: the canvas should not be within the container 2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
3: the container should be within the canvas 2图片 全部铺满1 （即 再怎么缩小也不会出现空隙）

dragMode 拖动模式

Default: ‘crop'
Options:
‘crop': create a new crop box 当鼠标 点击一处时根据这个点重新生成一个 裁剪框
‘move': move the canvas 可以拖动图片
‘none': do nothing 图片就不能拖动了

toggleDragModeOnDblclick： 默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式。

preview： 截图的显示位置。类型：String

responsive：是否在窗口尺寸改变的时候重置cropper。类型：Boolean，默认值true。

checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOriginclass，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOriginclass会阻止在图片url上添加时间戳，及图片的重新加载。

background：类型：Boolean，默认值true。是否在容器上显示网格背景。 要想改背景，是直接改，cropper.css样式中的 cropper-bg。

canvas（图片）相关

movable：类型：Boolean，默认值true。是否允许移动图片
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
scalable： 默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
zoomable： 默认true, 石头允许缩放图片。
zoomOnWheel： 默认 true 是否允许鼠标滚轴 缩放图片
zoomOnTouch： 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
wheelZoomRatio： 默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%

crop(裁剪框)相关

aspectRatio裁剪框比例 默认NaN
例如：: 1 / 1,//裁剪框比例 1：1
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
cropBoxMovable:默认true ,是否允许拖动裁剪框
cropBoxResizable:默认 true,//是否允许拖动 改变裁剪框大小
autoCrop：类型：Boolean，默认值true。是否允许在初始化时自动出现裁剪框。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
center: 默认true 是否显示裁剪框 中间的+ restore : 类型：Boolean，默认值true 是否
调整窗口大小后恢复裁剪区域。

大小相关

minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。

监听触发的方法

build：类型：Function，默认值null。build.cropper
事件的简写方式。 ====== 。控件初始化前执行
built：类型：Function，默认值null。built.cropper
事件的简写方式。 ====== 空间初始化完成后执行
dragstart：类型：Function，默认值null。dragstart.cropper
事件的简写方式。 ====== 拖动开始执行
dragmove：类型：Function，默认值null。dragmove.cropper
事件的简写方式。====== 拖动移动中执行
dragend：类型：Function，默认值null。dragend.cropper
事件的简写方式。====== 拖动结束执行
zoomin：类型：Function，默认值null。zoomin.cropper
事件的简写方式。 ====== 缩小执行
zoomout：类型：Function，默认值null。zoomout.cropper
事件的简写方式。 ====== 放大执行

index.html代码如下：

 
 
 
 
 
 


 
 
 

 

 

 
 

  ![](images/picture.jpg)
 
 
 

 
 

  

 
 
 
 

 

 
 

  
  
  放大
  
  
  
  
  缩小
  
  
 
 

  
  
  左移
  
  
  
  
  右移
  
  
  
  
  上移
  
  
  
  
  下移
  
  
 
 

  
  
  左转90º
  
  
  
  
  右转90º
  
  
 
 

  
  
  刷新
  
  
  
  
  
  上传图片
  
  
 
 

  
  上传头像
  
 
 
 

  

  

  

  
Cropped
  
   ×
  
  
  

  

  Close
  Download
  
  
  
 

 

 
 
 
 
 
 
 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：Cropper.js实现裁剪图片并上传(PC端)-创新互联
路径分享：http://cdkjz.cn/article/pojhh.html