cropper move to static
This commit is contained in:
thinkgem
332
modules/static/src/main/resources/static/cropper/3.1/cropper.css
Normal file
332
modules/static/src/main/resources/static/cropper/3.1/cropper.css
Normal file
@@ -0,0 +1,332 @@
|
|||||||
|
/*!
|
||||||
|
* Cropper v3.1.3
|
||||||
|
* https://github.com/fengyuanchen/cropper
|
||||||
|
*
|
||||||
|
* Copyright (c) 2014-2017 Chen Fengyuan
|
||||||
|
* Released under the MIT license
|
||||||
|
*
|
||||||
|
* Date: 2017-10-21T10:03:37.133Z
|
||||||
|
*/
|
||||||
|
|
||||||
|
.cropper-container {
|
||||||
|
direction: ltr;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-container img {/*Avoid margin top issue (Occur only when margin-top <= -height)
|
||||||
|
*/
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
image-orientation: 0deg;
|
||||||
|
max-height: none !important;
|
||||||
|
max-width: none !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-wrap-box,
|
||||||
|
.cropper-canvas,
|
||||||
|
.cropper-drag-box,
|
||||||
|
.cropper-crop-box,
|
||||||
|
.cropper-modal {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-wrap-box,
|
||||||
|
.cropper-canvas {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-drag-box {
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-modal {
|
||||||
|
background-color: #000;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-view-box {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
outline-color: rgba(51, 153, 255, 0.75);
|
||||||
|
outline: 1px solid #39f;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed {
|
||||||
|
border: 0 dashed #eee;
|
||||||
|
display: block;
|
||||||
|
opacity: .5;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed.dashed-h {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-width: 1px;
|
||||||
|
height: 33.33333%;
|
||||||
|
left: 0;
|
||||||
|
top: 33.33333%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed.dashed-v {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
left: 33.33333%;
|
||||||
|
top: 0;
|
||||||
|
width: 33.33333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center {
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
left: 50%;
|
||||||
|
opacity: .75;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center:before,
|
||||||
|
.cropper-center:after {
|
||||||
|
background-color: #eee;
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center:before {
|
||||||
|
height: 1px;
|
||||||
|
left: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center:after {
|
||||||
|
height: 7px;
|
||||||
|
left: 0;
|
||||||
|
top: -3px;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-face,
|
||||||
|
.cropper-line,
|
||||||
|
.cropper-point {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
opacity: .1;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-face {
|
||||||
|
background-color: #fff;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line {
|
||||||
|
background-color: #39f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-e {
|
||||||
|
cursor: e-resize;
|
||||||
|
right: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-n {
|
||||||
|
cursor: n-resize;
|
||||||
|
height: 5px;
|
||||||
|
left: 0;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-w {
|
||||||
|
cursor: w-resize;
|
||||||
|
left: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-s {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: s-resize;
|
||||||
|
height: 5px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point {
|
||||||
|
background-color: #39f;
|
||||||
|
height: 5px;
|
||||||
|
opacity: .75;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-e {
|
||||||
|
cursor: e-resize;
|
||||||
|
margin-top: -3px;
|
||||||
|
right: -3px;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-n {
|
||||||
|
cursor: n-resize;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-w {
|
||||||
|
cursor: w-resize;
|
||||||
|
left: -3px;
|
||||||
|
margin-top: -3px;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-s {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: s-resize;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-ne {
|
||||||
|
cursor: ne-resize;
|
||||||
|
right: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-nw {
|
||||||
|
cursor: nw-resize;
|
||||||
|
left: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-sw {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: sw-resize;
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-se {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: se-resize;
|
||||||
|
height: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
right: -3px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 5px;
|
||||||
|
opacity: .75;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-se:before {
|
||||||
|
background-color: #39f;
|
||||||
|
bottom: -50%;
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
height: 200%;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: -50%;
|
||||||
|
width: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-invisible {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-bg {
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-hide {
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-move {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-crop {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-disabled .cropper-drag-box,
|
||||||
|
.cropper-disabled .cropper-face,
|
||||||
|
.cropper-disabled .cropper-line,
|
||||||
|
.cropper-disabled .cropper-point {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片裁剪页面样式 */
|
||||||
|
.cropper-wrapper {padding:15px;}
|
||||||
|
.cropper-wrapper .img-container,
|
||||||
|
.cropper-wrapper .img-preview {overflow:hidden;background-color:#f7f7f7;text-align:center;width:100%;}
|
||||||
|
.cropper-wrapper .img-container {margin-bottom:1rem;max-height:497px;min-height:200px;}
|
||||||
|
.cropper-wrapper .img-container>img {max-width:100%;}
|
||||||
|
.cropper-wrapper .img-preview {float:left;margin-bottom:.5rem;margin-right:.5rem;overflow:hidden;}
|
||||||
|
.cropper-wrapper .img-preview>img {max-width:100%;}
|
||||||
|
.cropper-wrapper .preview-lg {height:14rem;width:14rem;}
|
||||||
|
.cropper-wrapper .preview-md {height:9rem;width:9rem;}
|
||||||
|
.cropper-wrapper .preview-sm {height:4.5rem;width:4.5rem;}
|
||||||
|
.cropper-wrapper .preview-xs {height:2.25rem;width:2.25rem;}
|
||||||
|
.cropper-wrapper .btn-group {margin-top:15px;margin-right:10px;}
|
||||||
|
|
||||||
|
/* 右下角拖动块大小 */
|
||||||
|
.cropper-wrapper .cropper-point.point-se {height:10px;width:10px;}
|
||||||
|
|
||||||
|
/* 隐藏网格线，中心坐标 */
|
||||||
|
.cropper-wrapper .cropper-dashed.dashed-h,
|
||||||
|
.cropper-wrapper .cropper-dashed.dashed-v,
|
||||||
|
.cropper-wrapper .cropper-center {display:none;}
|
||||||
|
|
||||||
|
/* 圆形图片 */
|
||||||
|
.cropper-wrapper.cropper-circle .cropper-view-box,
|
||||||
|
.cropper-wrapper.cropper-circle .cropper-face,
|
||||||
|
.cropper-wrapper.cropper-circle .img-preview {border-radius:50%;}
|
||||||
3246
modules/static/src/main/resources/static/cropper/3.1/cropper.js
Normal file
3246
modules/static/src/main/resources/static/cropper/3.1/cropper.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
1.container 容器
|
||||||
|
2.canvas 图片
|
||||||
|
3.crop 裁剪框
|
||||||
|
|
||||||
|
# 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 图片就不能拖动了
|
||||||
|
|
||||||
|
Define the dragging mode of the cropper.
|
||||||
|
toggleDragModeOnDblclick 默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式
|
||||||
|
preview 截图的显示位置 型：String(jQuery选择器)，默认值''
|
||||||
|
responsive ：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
|
||||||
|
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片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事件的简写方式。
|
||||||
|
|
||||||
Reference in New Issue
Block a user