图片裁剪插件 强大的图片裁剪插件

预览截图

功能介绍

此插件是一款基于Cropper.js开发的图片剪裁插件,可以自定义剪裁比例、剪裁大小、输出高度控制等等,常用于前后台图片剪裁或头像剪裁。

使用说明

使用方法:在class类上加个"cropper"属性即可,如下图
输入图片说明

参数说明

在按钮中添加以下属性可以对剪裁进行个性化设定。

参数示例说明默认
aspectRatiodata-aspect-ratio="0.8"比例0.8
autoCropAreadata-auto-crop-area="0.8"默认自动剪裁的区域大小0.8
cropBoxMovabledata-crop-box-movable="1"剪裁框是否可移动1
cropBoxResizabledata-crop-box-resizable="1"剪裁框是否可变大小1
minCropBoxWidthdata-min-crop-box-width="0"最小剪裁框宽度0
minCropBoxHeightdata-min-crop-box-height="0"最小剪裁框高度0
minContainerWidthdata-min-container-width="0"最小窗口宽度0
minContainerHeightdata-min-container-height="0"最小窗口高度0
minCanvasHeightdata-min-canvas-height="0"最小画布宽度0
minCanvasWidthdata-min-canvas-width="0"最小画布高度0
croppedWidthdata-cropped-width="300"剪裁输出宽度实际宽度
croppedHeightdata-cropped-height="300"剪裁输出宽度实际高度
croppedMinWidthdata-cropped-min-width="400"最小画布高度0
croppedMinHeightdata-cropped-min-height="400"最小画布高度0
croppedMaxWidthdata-cropped-max-width="500"最大画布高度0
croppedMaxHeightdata-cropped-max-height="300"最大画布高度0
fillColordata-fill-color="ffffff"背景填充色,默认为透明transparent

特别感谢

Cropper.jshttps://github.com/fengyuanchen/cropper
QQ小伙伴:CARPE DIEM

查看更多

8月前

修复控制台错误提示
修复比例按钮不工作的BUG

8月前

发布第一个版本