通过本插件允许用户通过拖拽区域边框来选定裁剪区域。

提示

为兼容更多的浏览器,此插件实际并不会对图片进行剪裁操作。当确定裁剪区域后,你需要将剪裁区域数据上传到服务器,让服务器进行图片裁剪操作。

你仍然可以通过监听before事件来自行处理确定裁剪区域后的操作,包括在本地对图片进行剪裁。

综合示例

拖拽来剪切图片
<!-- HTML结构 -->
<div class="img-cutter" id="imgCutter">
  <div class="canvas"><img src="image.jpg" alt=""></div>
  <div class="actions">
    <h5>拖拽来剪切图片</h5>
    <button type="button" class="btn btn-primary img-cutter-submit">确认</button>
  </div>
</div>
// 通过Javascript初始化
$("#imgCutter").imgCutter(options);

用法

启动参数

参数 名称 可选值 说明
coverColor 遮罩层颜色 表示颜色的字符串,默认为"#000"
coverOpacity 遮罩层透明度 小于1的数字,默认为0.6
defaultWidth 默认图片宽度 默认为128
defaultHeight 默认图片高度 默认为128
fixedRatio 启用固定尺寸比例 false(默认)|true 如果启用固定尺寸比例,则用户在拖拽更改尺寸时会已初始比例进行同步缩放
minWidth 最小宽度 默认为48
minHeight 最小高度 默认为48
post 提交地址 默认为null 当用户确认裁剪尺寸区域后会将尺寸区域数据通过POST请求提交到此地址
get 提交地址 默认为null 当用户确认裁剪尺寸区域后会将尺寸区域数据通过GET请求提交到此地址
// 使用启动参数
$("#imgCutter").imgCutter({
    fixedRatio: true
});

事件

事件 jquery事件名称 说明
ready ready.zui.imgcutter 当初始化之后时触发此事件
change change.zui.imgcutter 当用户更改所选择的区域时触发
before before.zui.imgcutter 当用户确认提交所选择的区域时触发,在该事件回调函数中返回false可以取消此次提交
done done.zui.imgcutter 当提交数据到服务器成功后触发
fail fail.zui.imgcutter 当提交数据到服务器失败后触发
always always.zui.imgcutter 当提交数据到服务器完成后触发