Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
5f4ce7fc
V
vue-element-admin
项目概览
圆滚滚核心
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5f4ce7fc
编写于
3月 13, 2018
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update[ImageCropper]: update vue-image-crop-upload to new version
上级
01928cd4
变更
8
展开全部
隐藏空白更改
内联
并排
Showing
8 changed file
with
1699 addition
and
1474 deletion
+1699
-1474
src/components/ImageCropper/index.vue
src/components/ImageCropper/index.vue
+1402
-684
src/components/ImageCropper/lang.js
src/components/ImageCropper/lang.js
+0
-41
src/components/ImageCropper/upload.css
src/components/ImageCropper/upload.css
+0
-691
src/components/ImageCropper/utils.js
src/components/ImageCropper/utils.js
+0
-58
src/components/ImageCropper/utils/data2blob.js
src/components/ImageCropper/utils/data2blob.js
+19
-0
src/components/ImageCropper/utils/effectRipple.js
src/components/ImageCropper/utils/effectRipple.js
+39
-0
src/components/ImageCropper/utils/language.js
src/components/ImageCropper/utils/language.js
+232
-0
src/components/ImageCropper/utils/mimes.js
src/components/ImageCropper/utils/mimes.js
+7
-0
未找到文件。
src/components/ImageCropper/index.vue
浏览文件 @
5f4ce7fc
此差异已折叠。
点击以展开。
src/components/ImageCropper/lang.js
已删除
100644 → 0
浏览文件 @
01928cd4
const
langBag
=
{
zh
:
{
hint
:
'
点击,或拖动图片至此处
'
,
loading
:
'
正在上传……
'
,
noSupported
:
'
浏览器不支持该功能,请使用IE10以上或其他现在浏览器!
'
,
success
:
'
上传成功
'
,
fail
:
'
图片上传失败
'
,
preview
:
'
头像预览
'
,
btn
:
{
off
:
'
取消
'
,
close
:
'
关闭
'
,
back
:
'
上一步
'
,
save
:
'
保存
'
},
error
:
{
onlyImg
:
'
仅限图片格式
'
,
outOfSize
:
'
单文件大小不能超过
'
,
lowestPx
:
'
图片最低像素为(宽*高):
'
}
},
en
:
{
hint
:
'
Click, or drag the file here
'
,
loading
:
'
Uploading……
'
,
noSupported
:
'
Browser does not support, please use IE10+ or other browsers
'
,
success
:
'
Upload success
'
,
fail
:
'
Upload failed
'
,
preview
:
'
Preview
'
,
btn
:
{
off
:
'
Cancel
'
,
close
:
'
Close
'
,
back
:
'
Back
'
,
save
:
'
Save
'
},
error
:
{
onlyImg
:
'
Image only
'
,
outOfSize
:
'
Image exceeds size limit:
'
,
lowestPx
:
'
The lowest pixel in the image:
'
}
}
}
export
default
langBag
src/components/ImageCropper/upload.css
已删除
100644 → 0
浏览文件 @
01928cd4
@charset
"UTF-8"
;
@-webkit-keyframes
vicp_progress
{
0
%
{
background-position-y
:
0
;
}
100
%
{
background-position-y
:
40px
;
}
}
@keyframes
vicp_progress
{
0
%
{
background-position-y
:
0
;
}
100
%
{
background-position-y
:
40px
;
}
}
@-webkit-keyframes
vicp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
0
)
translatey
(
-60px
);
transform
:
scale
(
0
)
translatey
(
-60px
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
)
translatey
(
0
);
transform
:
scale
(
1
)
translatey
(
0
);
}
}
@keyframes
vicp
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
0
)
translatey
(
-60px
);
transform
:
scale
(
0
)
translatey
(
-60px
);
}
100
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
)
translatey
(
0
);
transform
:
scale
(
1
)
translatey
(
0
);
}
}
.vue-image-crop-upload
{
position
:
fixed
;
display
:
block
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
z-index
:
10000
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
width
:
100%
;
height
:
100%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.65
);
-webkit-tap-highlight-color
:
transparent
;
-moz-tap-highlight-color
:
transparent
;
}
.vue-image-crop-upload
.vicp-wrap
{
-webkit-box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
position
:
fixed
;
display
:
block
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
z-index
:
10000
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
auto
;
width
:
600px
;
height
:
330px
;
padding
:
25px
;
background-color
:
#fff
;
border-radius
:
2px
;
-webkit-animation
:
vicp
0.12s
ease-in
;
animation
:
vicp
0.12s
ease-in
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-close
{
position
:
absolute
;
right
:
-30px
;
top
:
-30px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-close
.vicp-icon4
{
position
:
relative
;
display
:
block
;
width
:
30px
;
height
:
30px
;
cursor
:
pointer
;
-webkit-transition
:
-webkit-transform
0.18s
;
transition
:
-webkit-transform
0.18s
;
transition
:
transform
0.18s
;
transition
:
transform
0.18s
,
-webkit-transform
0.18s
;
-webkit-transform
:
rotate
(
0
);
-ms-transform
:
rotate
(
0
);
transform
:
rotate
(
0
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-close
.vicp-icon4
::after
,
.vue-image-crop-upload
.vicp-wrap
.vicp-close
.vicp-icon4
::before
{
-webkit-box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
content
:
''
;
position
:
absolute
;
top
:
12px
;
left
:
4px
;
width
:
20px
;
height
:
3px
;
-webkit-transform
:
rotate
(
45deg
);
-ms-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
background-color
:
#fff
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-close
.vicp-icon4
::after
{
-webkit-transform
:
rotate
(
-45deg
);
-ms-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-close
.vicp-icon4
:hover
{
-webkit-transform
:
rotate
(
90deg
);
-ms-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
{
position
:
relative
;
padding
:
35px
;
height
:
200px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.03
);
text-align
:
center
;
border
:
1px
dashed
rgba
(
0
,
0
,
0
,
0.08
);
overflow
:
hidden
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-icon1
{
display
:
block
;
margin
:
0
auto
6px
;
width
:
42px
;
height
:
42px
;
overflow
:
hidden
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-icon1
.vicp-icon1-arrow
{
display
:
block
;
margin
:
0
auto
;
width
:
0
;
height
:
0
;
border-bottom
:
14.7px
solid
rgba
(
0
,
0
,
0
,
0.3
);
border-left
:
14.7px
solid
transparent
;
border-right
:
14.7px
solid
transparent
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-icon1
.vicp-icon1-body
{
display
:
block
;
width
:
12.6px
;
height
:
14.7px
;
margin
:
0
auto
;
background-color
:
rgba
(
0
,
0
,
0
,
0.3
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-icon1
.vicp-icon1-bottom
{
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
display
:
block
;
height
:
12.6px
;
border
:
6px
solid
rgba
(
0
,
0
,
0
,
0.3
);
border-top
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-hint
{
display
:
block
;
padding
:
15px
;
font-size
:
14px
;
color
:
#666
;
line-height
:
30px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
.vicp-no-supported-hint
{
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
padding
:
30px
;
width
:
100%
;
height
:
60px
;
line-height
:
30px
;
background-color
:
#eee
;
text-align
:
center
;
color
:
#666
;
font-size
:
14px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step1
.vicp-drop-area
:hover
{
cursor
:
pointer
;
border-color
:
rgba
(
0
,
0
,
0
,
0.1
);
background-color
:
rgba
(
0
,
0
,
0
,
0.05
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
{
overflow
:
hidden
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
{
float
:
left
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-img-container
{
position
:
relative
;
display
:
block
;
width
:
240px
;
height
:
180px
;
background-color
:
#e5e5e0
;
overflow
:
hidden
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-img-container
.vicp-img
{
position
:
absolute
;
display
:
block
;
cursor
:
move
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-img-container
.vicp-img-shade
{
-webkit-box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
position
:
absolute
;
background-color
:
rgba
(
241
,
242
,
243
,
0.8
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-img-container
.vicp-img-shade.vicp-img-shade-1
{
top
:
0
;
left
:
0
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-img-container
.vicp-img-shade.vicp-img-shade-2
{
bottom
:
0
;
right
:
0
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
{
position
:
relative
;
margin
:
30px
0
;
width
:
240px
;
height
:
18px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon5
,
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon6
{
position
:
absolute
;
top
:
0
;
width
:
18px
;
height
:
18px
;
border-radius
:
100%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.08
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon5
:hover
,
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon6
:hover
{
-webkit-box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
cursor
:
pointer
;
background-color
:
rgba
(
0
,
0
,
0
,
0.14
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon5
{
left
:
0
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon5
::before
{
position
:
absolute
;
content
:
''
;
display
:
block
;
left
:
3px
;
top
:
8px
;
width
:
12px
;
height
:
2px
;
background-color
:
#fff
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon6
{
right
:
0
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon6
::before
{
position
:
absolute
;
content
:
''
;
display
:
block
;
left
:
3px
;
top
:
8px
;
width
:
12px
;
height
:
2px
;
background-color
:
#fff
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
.vicp-icon6
::after
{
position
:
absolute
;
content
:
''
;
display
:
block
;
top
:
3px
;
left
:
8px
;
width
:
2px
;
height
:
12px
;
background-color
:
#fff
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
{
display
:
block
;
padding-top
:
5px
;
margin
:
0
auto
;
width
:
180px
;
height
:
8px
;
vertical-align
:
top
;
background
:
transparent
;
-webkit-appearance
:
none
;
-moz-appearance
:
none
;
appearance
:
none
;
cursor
:
pointer
;
/* 滑块
---------------------------------------------------------------*/
/* 轨道
---------------------------------------------------------------*/
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:focus
{
outline
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-webkit-slider-thumb
{
-webkit-box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
-webkit-appearance
:
none
;
appearance
:
none
;
margin-top
:
-3px
;
width
:
12px
;
height
:
12px
;
background-color
:
#61c091
;
border-radius
:
100%
;
border
:
none
;
-webkit-transition
:
0.2s
;
transition
:
0.2s
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-moz-range-thumb
{
box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
-moz-appearance
:
none
;
appearance
:
none
;
width
:
12px
;
height
:
12px
;
background-color
:
#61c091
;
border-radius
:
100%
;
border
:
none
;
-webkit-transition
:
0.2s
;
transition
:
0.2s
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-ms-thumb
{
box-shadow
:
0
2px
6px
0
rgba
(
0
,
0
,
0
,
0.18
);
appearance
:
none
;
width
:
12px
;
height
:
12px
;
background-color
:
#61c091
;
border
:
none
;
border-radius
:
100%
;
-webkit-transition
:
0.2s
;
transition
:
0.2s
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:active::-moz-range-thumb
{
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
width
:
14px
;
height
:
14px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:active::-ms-thumb
{
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
width
:
14px
;
height
:
14px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:active::-webkit-slider-thumb
{
-webkit-box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.23
);
margin-top
:
-4px
;
width
:
14px
;
height
:
14px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-webkit-slider-runnable-track
{
-webkit-box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
width
:
100%
;
height
:
6px
;
cursor
:
pointer
;
border-radius
:
2px
;
border
:
none
;
background-color
:
rgba
(
68
,
170
,
119
,
0.3
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-moz-range-track
{
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
width
:
100%
;
height
:
6px
;
cursor
:
pointer
;
border-radius
:
2px
;
border
:
none
;
background-color
:
rgba
(
68
,
170
,
119
,
0.3
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-ms-track
{
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.12
);
width
:
100%
;
cursor
:
pointer
;
background
:
transparent
;
border-color
:
transparent
;
color
:
transparent
;
height
:
6px
;
border-radius
:
2px
;
border
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-ms-fill-lower
{
background-color
:
rgba
(
68
,
170
,
119
,
0.3
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
::-ms-fill-upper
{
background-color
:
rgba
(
68
,
170
,
119
,
0.15
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:focus::-webkit-slider-runnable-track
{
background-color
:
rgba
(
68
,
170
,
119
,
0.5
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:focus::-moz-range-track
{
background-color
:
rgba
(
68
,
170
,
119
,
0.5
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:focus::-ms-fill-lower
{
background-color
:
rgba
(
68
,
170
,
119
,
0.45
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-left
.vicp-range
input
[
type
=
range
]
:focus::-ms-fill-upper
{
background-color
:
rgba
(
68
,
170
,
119
,
0.25
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
{
float
:
right
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
{
height
:
150px
;
overflow
:
hidden
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
.vicp-preview-item
{
position
:
relative
;
padding
:
5px
;
width
:
100px
;
height
:
100px
;
float
:
left
;
margin-right
:
16px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
.vicp-preview-item
span
{
position
:
absolute
;
bottom
:
-30px
;
width
:
100%
;
font-size
:
14px
;
color
:
#bbb
;
display
:
block
;
text-align
:
center
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
.vicp-preview-item
img
{
position
:
absolute
;
display
:
block
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
auto
;
padding
:
3px
;
background-color
:
#fff
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
0.15
);
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
.vicp-preview-item
:last-child
{
margin-right
:
0
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step2
.vicp-crop
.vicp-crop-right
.vicp-preview
.vicp-preview-item
:last-child
img
{
border-radius
:
100%
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
{
position
:
relative
;
padding
:
35px
;
height
:
200px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.03
);
text-align
:
center
;
border
:
1px
dashed
#ddd
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-loading
{
display
:
block
;
padding
:
15px
;
font-size
:
16px
;
color
:
#999
;
line-height
:
30px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-progress-wrap
{
margin-top
:
12px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.08
);
border-radius
:
3px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-progress-wrap
.vicp-progress
{
position
:
relative
;
display
:
block
;
height
:
5px
;
border-radius
:
3px
;
background-color
:
#4a7
;
-webkit-box-shadow
:
0
2px
6px
0
rgba
(
68
,
170
,
119
,
0.3
);
box-shadow
:
0
2px
6px
0
rgba
(
68
,
170
,
119
,
0.3
);
-webkit-transition
:
width
0.15s
linear
;
transition
:
width
0.15s
linear
;
background-image
:
-webkit-linear-gradient
(
135deg
,
rgba
(
255
,
255
,
255
,
0.2
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
0.2
)
50%
,
rgba
(
255
,
255
,
255
,
0.2
)
75%
,
transparent
75%
,
transparent
);
background-image
:
linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
0.2
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
0.2
)
50%
,
rgba
(
255
,
255
,
255
,
0.2
)
75%
,
transparent
75%
,
transparent
);
background-size
:
40px
40px
;
-webkit-animation
:
vicp_progress
0.5s
linear
infinite
;
animation
:
vicp_progress
0.5s
linear
infinite
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-progress-wrap
.vicp-progress
::after
{
content
:
''
;
position
:
absolute
;
display
:
block
;
top
:
-3px
;
right
:
-3px
;
width
:
9px
;
height
:
9px
;
border
:
1px
solid
rgba
(
245
,
246
,
247
,
0.7
);
-webkit-box-shadow
:
0
1px
4px
0
rgba
(
68
,
170
,
119
,
0.7
);
box-shadow
:
0
1px
4px
0
rgba
(
68
,
170
,
119
,
0.7
);
border-radius
:
100%
;
background-color
:
#4a7
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-error
,
.vue-image-crop-upload
.vicp-wrap
.vicp-step3
.vicp-upload
.vicp-success
{
height
:
100px
;
line-height
:
100px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-operate
{
position
:
absolute
;
right
:
20px
;
bottom
:
20px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-operate
a
{
position
:
relative
;
float
:
left
;
display
:
block
;
margin-left
:
10px
;
width
:
100px
;
height
:
36px
;
line-height
:
36px
;
text-align
:
center
;
cursor
:
pointer
;
font-size
:
14px
;
color
:
#4a7
;
border-radius
:
2px
;
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-operate
a
:hover
{
background-color
:
rgba
(
0
,
0
,
0
,
0.03
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-error
,
.vue-image-crop-upload
.vicp-wrap
.vicp-success
{
display
:
block
;
font-size
:
14px
;
line-height
:
24px
;
height
:
24px
;
color
:
#d10
;
text-align
:
center
;
vertical-align
:
top
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-success
{
color
:
#4a7
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-icon3
{
position
:
relative
;
display
:
inline-block
;
width
:
20px
;
height
:
20px
;
top
:
4px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-icon3
::after
{
position
:
absolute
;
top
:
3px
;
left
:
6px
;
width
:
6px
;
height
:
10px
;
border-width
:
0
2px
2px
0
;
border-color
:
#4a7
;
border-style
:
solid
;
-webkit-transform
:
rotate
(
45deg
);
-ms-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
content
:
''
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-icon2
{
position
:
relative
;
display
:
inline-block
;
width
:
20px
;
height
:
20px
;
top
:
4px
;
}
.vue-image-crop-upload
.vicp-wrap
.vicp-icon2
::after
,
.vue-image-crop-upload
.vicp-wrap
.vicp-icon2
::before
{
content
:
''
;
position
:
absolute
;
top
:
9px
;
left
:
4px
;
width
:
13px
;
height
:
2px
;
background-color
:
#d10
;
-webkit-transform
:
rotate
(
45deg
);
-ms-transform
:
rotate
(
45deg
);
transform
:
rotate
(
45deg
);
}
.vue-image-crop-upload
.vicp-wrap
.vicp-icon2
::after
{
-webkit-transform
:
rotate
(
-45deg
);
-ms-transform
:
rotate
(
-45deg
);
transform
:
rotate
(
-45deg
);
}
.e-ripple
{
position
:
absolute
;
border-radius
:
100%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.15
);
background-clip
:
padding-box
;
pointer-events
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
-webkit-transform
:
scale
(
0
);
-ms-transform
:
scale
(
0
);
transform
:
scale
(
0
);
opacity
:
1
;
}
.e-ripple.z-active
{
opacity
:
0
;
-webkit-transform
:
scale
(
2
);
-ms-transform
:
scale
(
2
);
transform
:
scale
(
2
);
-webkit-transition
:
opacity
1.2s
ease-out
,
-webkit-transform
0.6s
ease-out
;
transition
:
opacity
1.2s
ease-out
,
-webkit-transform
0.6s
ease-out
;
transition
:
opacity
1.2s
ease-out
,
transform
0.6s
ease-out
;
transition
:
opacity
1.2s
ease-out
,
transform
0.6s
ease-out
,
-webkit-transform
0.6s
ease-out
;
}
\ No newline at end of file
src/components/ImageCropper/utils.js
已删除
100644 → 0
浏览文件 @
01928cd4
/* eslint-disable */
/**
*
* @param e
* @param arg_opts
* @returns {boolean}
*/
export
function
effectRipple
(
e
,
arg_opts
)
{
let
opts
=
Object
.
assign
({
ele
:
e
.
target
,
// 波纹作用元素
type
:
'
hit
'
,
// hit点击位置扩散 center中心点扩展
bgc
:
'
rgba(0, 0, 0, 0.15)
'
// 波纹颜色
},
arg_opts
),
target
=
opts
.
ele
;
if
(
target
)
{
let
rect
=
target
.
getBoundingClientRect
(),
ripple
=
target
.
querySelector
(
'
.e-ripple
'
);
if
(
!
ripple
)
{
ripple
=
document
.
createElement
(
'
span
'
);
ripple
.
className
=
'
e-ripple
'
;
ripple
.
style
.
height
=
ripple
.
style
.
width
=
Math
.
max
(
rect
.
width
,
rect
.
height
)
+
'
px
'
;
target
.
appendChild
(
ripple
);
}
else
{
ripple
.
className
=
'
e-ripple
'
;
}
switch
(
opts
.
type
)
{
case
'
center
'
:
ripple
.
style
.
top
=
(
rect
.
height
/
2
-
ripple
.
offsetHeight
/
2
)
+
'
px
'
;
ripple
.
style
.
left
=
(
rect
.
width
/
2
-
ripple
.
offsetWidth
/
2
)
+
'
px
'
;
break
;
default
:
ripple
.
style
.
top
=
(
e
.
pageY
-
rect
.
top
-
ripple
.
offsetHeight
/
2
-
document
.
body
.
scrollTop
)
+
'
px
'
;
ripple
.
style
.
left
=
(
e
.
pageX
-
rect
.
left
-
ripple
.
offsetWidth
/
2
-
document
.
body
.
scrollLeft
)
+
'
px
'
;
}
ripple
.
style
.
backgroundColor
=
opts
.
bgc
;
ripple
.
className
=
'
e-ripple z-active
'
;
return
false
;
}
}
// database64文件格式转换为2进制
/**
*
* @param data
* @param mime
* @returns {*}
*/
export
function
data2blob
(
data
,
mime
)
{
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
data
=
data
.
split
(
'
,
'
)[
1
];
data
=
window
.
atob
(
data
);
var
ia
=
new
Uint8Array
(
data
.
length
);
for
(
var
i
=
0
;
i
<
data
.
length
;
i
++
)
{
ia
[
i
]
=
data
.
charCodeAt
(
i
);
}
// canvas.toDataURL 返回的默认格式就是 image/png
return
new
Blob
([
ia
],
{
type
:
mime
});
};
src/components/ImageCropper/utils/data2blob.js
0 → 100755
浏览文件 @
5f4ce7fc
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[blob]} [description]
*/
export
default
function
(
data
,
mime
)
{
data
=
data
.
split
(
'
,
'
)[
1
]
data
=
window
.
atob
(
data
)
var
ia
=
new
Uint8Array
(
data
.
length
)
for
(
var
i
=
0
;
i
<
data
.
length
;
i
++
)
{
ia
[
i
]
=
data
.
charCodeAt
(
i
)
}
// canvas.toDataURL 返回的默认格式就是 image/png
return
new
Blob
([
ia
],
{
type
:
mime
})
}
src/components/ImageCropper/utils/effectRipple.js
0 → 100755
浏览文件 @
5f4ce7fc
/**
* 点击波纹效果
*
* @param {[event]} e [description]
* @param {[Object]} arg_opts [description]
* @return {[bollean]} [description]
*/
export
default
function
(
e
,
arg_opts
)
{
var
opts
=
Object
.
assign
({
ele
:
e
.
target
,
// 波纹作用元素
type
:
'
hit
'
,
// hit点击位置扩散center中心点扩展
bgc
:
'
rgba(0, 0, 0, 0.15)
'
// 波纹颜色
},
arg_opts
)
var
target
=
opts
.
ele
if
(
target
)
{
var
rect
=
target
.
getBoundingClientRect
()
var
ripple
=
target
.
querySelector
(
'
.e-ripple
'
)
if
(
!
ripple
)
{
ripple
=
document
.
createElement
(
'
span
'
)
ripple
.
className
=
'
e-ripple
'
ripple
.
style
.
height
=
ripple
.
style
.
width
=
Math
.
max
(
rect
.
width
,
rect
.
height
)
+
'
px
'
target
.
appendChild
(
ripple
)
}
else
{
ripple
.
className
=
'
e-ripple
'
}
switch
(
opts
.
type
)
{
case
'
center
'
:
ripple
.
style
.
top
=
(
rect
.
height
/
2
-
ripple
.
offsetHeight
/
2
)
+
'
px
'
ripple
.
style
.
left
=
(
rect
.
width
/
2
-
ripple
.
offsetWidth
/
2
)
+
'
px
'
break
default
:
ripple
.
style
.
top
=
(
e
.
pageY
-
rect
.
top
-
ripple
.
offsetHeight
/
2
-
document
.
body
.
scrollTop
)
+
'
px
'
ripple
.
style
.
left
=
(
e
.
pageX
-
rect
.
left
-
ripple
.
offsetWidth
/
2
-
document
.
body
.
scrollLeft
)
+
'
px
'
}
ripple
.
style
.
backgroundColor
=
opts
.
bgc
ripple
.
className
=
'
e-ripple z-active
'
return
false
}
}
src/components/ImageCropper/utils/language.js
0 → 100755
浏览文件 @
5f4ce7fc
export
default
{
zh
:
{
hint
:
'
点击,或拖动图片至此处
'
,
loading
:
'
正在上传……
'
,
noSupported
:
'
浏览器不支持该功能,请使用IE10以上或其他现在浏览器!
'
,
success
:
'
上传成功
'
,
fail
:
'
图片上传失败
'
,
preview
:
'
头像预览
'
,
btn
:
{
off
:
'
取消
'
,
close
:
'
关闭
'
,
back
:
'
上一步
'
,
save
:
'
保存
'
},
error
:
{
onlyImg
:
'
仅限图片格式
'
,
outOfSize
:
'
单文件大小不能超过
'
,
lowestPx
:
'
图片最低像素为(宽*高):
'
}
},
'
zh-tw
'
:
{
hint
:
'
點擊,或拖動圖片至此處
'
,
loading
:
'
正在上傳……
'
,
noSupported
:
'
瀏覽器不支持該功能,請使用IE10以上或其他現代瀏覽器!
'
,
success
:
'
上傳成功
'
,
fail
:
'
圖片上傳失敗
'
,
preview
:
'
頭像預覽
'
,
btn
:
{
off
:
'
取消
'
,
close
:
'
關閉
'
,
back
:
'
上一步
'
,
save
:
'
保存
'
},
error
:
{
onlyImg
:
'
僅限圖片格式
'
,
outOfSize
:
'
單文件大小不能超過
'
,
lowestPx
:
'
圖片最低像素為(寬*高):
'
}
},
en
:
{
hint
:
'
Click or drag the file here to upload
'
,
loading
:
'
Uploading…
'
,
noSupported
:
'
Browser is not supported, please use IE10+ or other browsers
'
,
success
:
'
Upload success
'
,
fail
:
'
Upload failed
'
,
preview
:
'
Preview
'
,
btn
:
{
off
:
'
Cancel
'
,
close
:
'
Close
'
,
back
:
'
Back
'
,
save
:
'
Save
'
},
error
:
{
onlyImg
:
'
Image only
'
,
outOfSize
:
'
Image exceeds size limit:
'
,
lowestPx
:
'
Image
\'
s size is too low. Expected at least:
'
}
},
ro
:
{
hint
:
'
Atinge sau trage fișierul aici
'
,
loading
:
'
Se încarcă
'
,
noSupported
:
'
Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.
'
,
success
:
'
S-a încărcat cu succes
'
,
fail
:
'
A apărut o problemă la încărcare
'
,
preview
:
'
Previzualizează
'
,
btn
:
{
off
:
'
Anulează
'
,
close
:
'
Închide
'
,
back
:
'
Înapoi
'
,
save
:
'
Salvează
'
},
error
:
{
onlyImg
:
'
Doar imagini
'
,
outOfSize
:
'
Imaginea depășește limita de:
'
,
loewstPx
:
'
Imaginea este prea mică; Minim:
'
}
},
ru
:
{
hint
:
'
Нажмите, или перетащите файл в это окно
'
,
loading
:
'
Загружаю……
'
,
noSupported
:
'
Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры
'
,
success
:
'
Загрузка выполнена успешно
'
,
fail
:
'
Ошибка загрузки
'
,
preview
:
'
Предпросмотр
'
,
btn
:
{
off
:
'
Отменить
'
,
close
:
'
Закрыть
'
,
back
:
'
Назад
'
,
save
:
'
Сохранить
'
},
error
:
{
onlyImg
:
'
Только изображения
'
,
outOfSize
:
'
Изображение превышает предельный размер:
'
,
lowestPx
:
'
Минимальный размер изображения:
'
}
},
'
pt-br
'
:
{
hint
:
'
Clique ou arraste o arquivo aqui para carregar
'
,
loading
:
'
Carregando…
'
,
noSupported
:
'
Browser não suportado, use o IE10+ ou outro browser
'
,
success
:
'
Sucesso ao carregar imagem
'
,
fail
:
'
Falha ao carregar imagem
'
,
preview
:
'
Pré-visualizar
'
,
btn
:
{
off
:
'
Cancelar
'
,
close
:
'
Fechar
'
,
back
:
'
Voltar
'
,
save
:
'
Salvar
'
},
error
:
{
onlyImg
:
'
Apenas imagens
'
,
outOfSize
:
'
A imagem excede o limite de tamanho:
'
,
lowestPx
:
'
O tamanho da imagem é muito pequeno. Tamanho mínimo:
'
}
},
fr
:
{
hint
:
'
Cliquez ou glissez le fichier ici.
'
,
loading
:
'
Téléchargement…
'
,
noSupported
:
'
Votre navigateur n
\'
est pas supporté. Utilisez IE10 + ou un autre navigateur s
\'
il vous plaît.
'
,
success
:
'
Téléchargement réussit
'
,
fail
:
'
Téléchargement echoué
'
,
preview
:
'
Aperçu
'
,
btn
:
{
off
:
'
Annuler
'
,
close
:
'
Fermer
'
,
back
:
'
Retour
'
,
save
:
'
Enregistrer
'
},
error
:
{
onlyImg
:
'
Image uniquement
'
,
outOfSize
:
'
L
\'
image sélectionnée dépasse la taille maximum:
'
,
lowestPx
:
'
L
\'
image sélectionnée est trop petite. Dimensions attendues:
'
}
},
nl
:
{
hint
:
'
Klik hier of sleep een afbeelding in dit vlak
'
,
loading
:
'
Uploaden…
'
,
noSupported
:
'
Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.
'
,
success
:
'
Upload succesvol
'
,
fail
:
'
Upload mislukt
'
,
preview
:
'
Voorbeeld
'
,
btn
:
{
off
:
'
Annuleren
'
,
close
:
'
Sluiten
'
,
back
:
'
Terug
'
,
save
:
'
Opslaan
'
},
error
:
{
onlyImg
:
'
Alleen afbeeldingen
'
,
outOfSize
:
'
De afbeelding is groter dan:
'
,
lowestPx
:
'
De afbeelding is te klein! Minimale afmetingen:
'
}
},
tr
:
{
hint
:
'
Tıkla veya yüklemek istediğini buraya sürükle
'
,
loading
:
'
Yükleniyor…
'
,
noSupported
:
'
Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın
'
,
success
:
'
Yükleme başarılı
'
,
fail
:
'
Yüklemede hata oluştu
'
,
preview
:
'
Önizle
'
,
btn
:
{
off
:
'
İptal
'
,
close
:
'
Kapat
'
,
back
:
'
Geri
'
,
save
:
'
Kaydet
'
},
error
:
{
onlyImg
:
'
Sadece resim
'
,
outOfSize
:
'
Resim yükleme limitini aşıyor:
'
,
lowestPx
:
'
Resmin boyutu çok küçük. En az olması gereken:
'
}
},
'
es-MX
'
:
{
hint
:
'
Selecciona o arrastra una imagen
'
,
loading
:
'
Subiendo...
'
,
noSupported
:
'
Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes
'
,
success
:
'
Subido exitosamente
'
,
fail
:
'
Sucedió un error
'
,
preview
:
'
Vista previa
'
,
btn
:
{
off
:
'
Cancelar
'
,
close
:
'
Cerrar
'
,
back
:
'
Atras
'
,
save
:
'
Guardar
'
},
error
:
{
onlyImg
:
'
Unicamente imagenes
'
,
outOfSize
:
'
La imagen excede el tamaño maximo:
'
,
lowestPx
:
'
La imagen es demasiado pequeño. Se espera por lo menos:
'
}
},
de
:
{
hint
:
'
Klick hier oder zieh eine Datei hier rein zum Hochladen
'
,
loading
:
'
Hochladen…
'
,
noSupported
:
'
Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser
'
,
success
:
'
Upload erfolgreich
'
,
fail
:
'
Upload fehlgeschlagen
'
,
preview
:
'
Vorschau
'
,
btn
:
{
off
:
'
Abbrechen
'
,
close
:
'
Schließen
'
,
back
:
'
Zurück
'
,
save
:
'
Speichern
'
},
error
:
{
onlyImg
:
'
Nur Bilder
'
,
outOfSize
:
'
Das Bild ist zu groß:
'
,
lowestPx
:
'
Das Bild ist zu klein. Mindestens:
'
}
},
ja
:
{
hint
:
'
クリック・ドラッグしてファイルをアップロード
'
,
loading
:
'
アップロード中...
'
,
noSupported
:
'
このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。
'
,
success
:
'
アップロード成功
'
,
fail
:
'
アップロード失敗
'
,
preview
:
'
プレビュー
'
,
btn
:
{
off
:
'
キャンセル
'
,
close
:
'
閉じる
'
,
back
:
'
戻る
'
,
save
:
'
保存
'
},
error
:
{
onlyImg
:
'
画像のみ
'
,
outOfSize
:
'
画像サイズが上限を超えています。上限:
'
,
lowestPx
:
'
画像が小さすぎます。最小サイズ:
'
}
}
}
src/components/ImageCropper/utils/mimes.js
0 → 100755
浏览文件 @
5f4ce7fc
export
default
{
'
jpg
'
:
'
image/jpeg
'
,
'
png
'
:
'
image/png
'
,
'
gif
'
:
'
image/gif
'
,
'
svg
'
:
'
image/svg+xml
'
,
'
psd
'
:
'
image/photoshop
'
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录