Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
萌新之路
uni-starter
提交
a8b1baa4
U
uni-starter
项目概览
萌新之路
/
uni-starter
与 Fork 源项目一致
Fork自
DCloud / uni-starter
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-starter
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a8b1baa4
编写于
5月 14, 2021
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修复微信小程序端裁剪图片问题
上级
827afca9
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
587 addition
and
507 deletion
+587
-507
pages/ucenter/userinfo/limeClipper/limeClipper.vue
pages/ucenter/userinfo/limeClipper/limeClipper.vue
+342
-220
pages/ucenter/userinfo/limeClipper/utils.js
pages/ucenter/userinfo/limeClipper/utils.js
+244
-280
pages/ucenter/userinfo/uploadCutImageToUnicloud.vue
pages/ucenter/userinfo/uploadCutImageToUnicloud.vue
+1
-7
未找到文件。
pages/ucenter/userinfo/limeClipper/limeClipper.vue
浏览文件 @
a8b1baa4
此差异已折叠。
点击以展开。
pages/ucenter/userinfo/limeClipper/utils.js
浏览文件 @
a8b1baa4
/**
* h5网络地址转base64
*/
export
function
pathToBase64
(
path
)
{
// #ifdef H5
return
new
Promise
((
resolve
,
reject
)
=>
{
const
_fileReader
=
(
blob
)
=>
{
const
fileReader
=
new
FileReader
();
fileReader
.
onload
=
(
e
)
=>
{
resolve
(
e
.
target
.
result
);
};
fileReader
.
readAsDataURL
(
blob
);
fileReader
.
onerror
=
(
error
)
=>
{
console
.
error
(
'
blobToBase64 error:
'
,
JSON
.
stringify
(
error
))
reject
(
new
Error
(
'
blobToBase64 error
'
));
};
}
if
(
/^
(
http|
\/\/)
/
.
test
(
path
)
&&
typeof
FileReader
===
'
function
'
)
{
window
.
URL
=
window
.
URL
||
window
.
webkitURL
;
const
xhr
=
new
XMLHttpRequest
();
xhr
.
open
(
"
get
"
,
path
,
true
);
xhr
.
timeout
=
2000
;
xhr
.
responseType
=
"
blob
"
;
xhr
.
onload
=
function
()
{
if
(
this
.
status
==
200
)
{
_fileReader
(
this
.
response
)
}
}
xhr
.
send
();
}
})
// #endif
}
/**
* 判断手指触摸位置
*/
export
function
determineDirection
(
cutX
,
cutY
,
clipWidth
,
clipHeight
,
currentX
,
currentY
)
{
const
EXPAND_SIZE
=
24
;
let
leftx1
=
cutX
-
EXPAND_SIZE
;
let
leftx2
=
cutX
+
EXPAND_SIZE
;
let
topy1
=
cutY
-
EXPAND_SIZE
;
let
topy2
=
cutY
+
EXPAND_SIZE
;
let
rightx1
=
cutX
+
clipWidth
-
EXPAND_SIZE
;
let
rightx2
=
cutX
+
clipWidth
+
EXPAND_SIZE
;
let
bottomy1
=
cutY
+
clipHeight
-
EXPAND_SIZE
;
let
bottomy2
=
cutY
+
clipHeight
+
EXPAND_SIZE
;
let
corner
;
const
isRight
=
currentX
>
rightx1
&&
currentX
<
rightx2
;
const
isLeft
=
currentX
>
leftx1
&&
currentX
<
leftx2
;
const
isBottom
=
currentY
>
bottomy1
&&
currentY
<
bottomy2
;
const
isTop
=
currentY
>
topy1
&&
currentY
<
topy2
;
if
(
isRight
&&
isBottom
)
{
corner
=
1
;
}
else
if
(
isRight
&&
isTop
)
{
corner
=
2
;
}
else
if
(
isLeft
&&
isTop
)
{
corner
=
3
;
}
else
if
(
isLeft
&&
isBottom
)
{
corner
=
4
;
}
return
corner
;
}
/**
* 图片边缘检测检测时,计算图片偏移量
*/
export
function
calcImageOffset
(
data
,
scale
)
{
let
{
imageLeft
:
left
,
imageTop
:
top
,
imageWidth
,
imageHeight
,
cutX
,
clipWidth
,
cutY
,
clipHeight
}
=
data
scale
=
scale
||
data
.
scale
;
if
((
data
.
angle
/
90
)
%
2
)
{
imageWidth
=
mageHeight
;
imageHeight
=
mageWidth
;
}
// 当前图片宽度/高度
const
currentImageSize
=
(
size
)
=>
(
size
*
scale
)
/
2
;
const
currentImageWidth
=
currentImageSize
(
imageWidth
);
const
currentImageHeight
=
currentImageSize
(
imageHeight
);
left
=
cutX
+
currentImageWidth
>=
left
?
left
:
cutX
+
currentImageWidth
;
left
=
cutX
+
clipWidth
-
currentImageWidth
<=
left
?
left
:
cutX
+
clipWidth
-
currentImageWidth
;
top
=
cutY
+
currentImageHeight
>=
top
?
top
:
cutY
+
currentImageHeight
;
top
=
cutY
+
clipHeight
-
currentImageHeight
<=
top
?
top
:
cutY
+
clipHeight
-
currentImageHeight
;
return
{
left
,
top
,
scale
};
}
/**
* 图片边缘检测时,计算图片缩放比例
*/
export
function
calcImageScale
(
data
,
scale
)
{
scale
=
scale
||
data
.
scale
;
let
{
imageWidth
,
imageHeight
,
clipWidth
,
clipHeight
,
angle
}
=
data
if
((
angle
/
90
)
%
2
)
{
imageWidth
=
imageHeight
;
imageHeight
=
imageWidth
;
}
if
(
imageWidth
*
scale
<
clipWidth
)
{
scale
=
clipWidth
/
imageWidth
;
}
if
(
imageHeight
*
scale
<
clipHeight
)
{
scale
=
Math
.
max
(
scale
,
clipHeight
/
imageHeight
);
}
return
scale
;
}
/**
* 计算图片尺寸
*/
export
function
calcImageSize
(
width
,
height
,
data
)
{
let
imageWidth
=
width
,
imageHeight
=
height
;
let
{
clipWidth
,
clipHeight
,
sysinfo
,
width
:
oWidth
,
height
:
oHeight
}
=
data
if
(
imageWidth
&&
imageHeight
)
{
if
(
imageWidth
/
imageHeight
>
(
clipWidth
||
oWidth
)
/
(
clipWidth
||
oHeight
))
{
imageHeight
=
clipHeight
||
oHeight
;
imageWidth
=
(
width
/
height
)
*
imageHeight
;
}
else
{
imageWidth
=
clipWidth
||
oWidth
;
imageHeight
=
(
height
/
width
)
*
imageWidth
;
}
}
else
{
let
sys
=
sysinfo
||
uni
.
getSystemInfoSync
();
imageWidth
=
sys
.
windowWidth
;
imageHeight
=
0
;
}
return
{
imageWidth
,
imageHeight
};
}
/**
* 勾股定理求斜边
*/
export
function
calcPythagoreanTheorem
(
width
,
height
)
{
return
Math
.
sqrt
(
Math
.
pow
(
width
,
2
)
+
Math
.
pow
(
height
,
2
));
}
/**
* 拖动裁剪框时计算
*/
export
function
clipTouchMoveOfCalculate
(
data
,
event
)
{
const
clientX
=
event
.
touches
[
0
].
clientX
;
const
clientY
=
event
.
touches
[
0
].
clientY
;
const
{
clipWidth
,
clipHeight
,
cutY
:
oldCutY
,
cutX
:
oldCutX
,
cutstart
,
isLockRatio
}
=
data
;
let
{
maxWidth
,
minWidth
,
maxHeight
,
minHeight
}
=
data
;
maxWidth
=
maxWidth
/
2
;
minWidth
=
minWidth
/
2
;
minHeight
=
minHeight
/
2
;
maxHeight
=
maxHeight
/
2
;
let
width
=
clipWidth
,
height
=
clipHeight
,
cutY
=
oldCutY
,
cutX
=
oldCutX
,
sizecorrect
=
()
=>
{
width
=
width
<=
maxWidth
?
(
width
>=
minWidth
?
width
:
minWidth
)
:
maxWidth
;
height
=
height
<=
maxHeight
?
(
height
>=
minHeight
?
height
:
minHeight
)
:
maxHeight
;
},
sizeinspect
=
()
=>
{
sizecorrect
();
if
((
width
>
maxWidth
||
width
<
minWidth
||
height
>
maxHeight
||
height
<
minHeight
)
&&
isLockRatio
)
{
return
false
;
}
else
{
return
true
;
}
};
if
(
cutstart
.
corner
)
{
height
=
cutstart
.
height
+
(
cutstart
.
corner
>
1
&&
cutstart
.
corner
<
4
?
1
:
-
1
)
*
(
cutstart
.
y
-
clientY
);
}
switch
(
cutstart
.
corner
)
{
case
1
:
width
=
cutstart
.
width
-
cutstart
.
x
+
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
return
;
break
;
case
2
:
width
=
cutstart
.
width
-
cutstart
.
x
+
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
cutY
=
cutstart
.
cutY
-
(
height
-
cutstart
.
height
);
}
break
;
case
3
:
width
=
cutstart
.
width
+
cutstart
.
x
-
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
cutY
=
cutstart
.
cutY
-
(
height
-
cutstart
.
height
);
cutX
=
cutstart
.
cutX
-
(
width
-
cutstart
.
width
);
}
break
;
case
4
:
width
=
cutstart
.
width
+
cutstart
.
x
-
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
cutX
=
cutstart
.
cutX
-
(
width
-
cutstart
.
width
);
}
break
;
default
:
break
;
}
return
{
width
,
height
,
cutX
,
cutY
};
}
/**
* 单指拖动图片计算偏移
*/
export
function
imageTouchMoveOfCalcOffset
(
data
,
clientXForLeft
,
clientYForLeft
)
{
let
left
=
clientXForLeft
-
data
.
touchRelative
[
0
].
x
,
top
=
clientYForLeft
-
data
.
touchRelative
[
0
].
y
;
return
{
left
,
top
};
}
/**
* 判断手指触摸位置
*/
export
function
determineDirection
(
clipX
,
clipY
,
clipWidth
,
clipHeight
,
currentX
,
currentY
)
{
/*
* (右下>>1 右上>>2 左上>>3 左下>>4)
*/
let
corner
;
/**
* 思路:(利用直角坐标系)
* 1.找出裁剪框中心点
* 2.如点击坐标在上方点与左方点区域内,则点击为左上角
* 3.如点击坐标在下方点与右方点区域内,则点击为右下角
* 4.其他角同理
*/
const
mainPoint
=
[
clipX
+
clipWidth
/
2
,
clipY
+
clipHeight
/
2
];
// 中心点
const
currentPoint
=
[
currentX
,
currentY
];
// 触摸点
if
(
currentPoint
[
0
]
<=
mainPoint
[
0
]
&&
currentPoint
[
1
]
<=
mainPoint
[
1
])
{
corner
=
3
;
// 左上
}
else
if
(
currentPoint
[
0
]
>=
mainPoint
[
0
]
&&
currentPoint
[
1
]
<=
mainPoint
[
1
])
{
corner
=
2
;
// 右上
}
else
if
(
currentPoint
[
0
]
<=
mainPoint
[
0
]
&&
currentPoint
[
1
]
>=
mainPoint
[
1
])
{
corner
=
4
;
// 左下
}
else
if
(
currentPoint
[
0
]
>=
mainPoint
[
0
]
&&
currentPoint
[
1
]
>=
mainPoint
[
1
])
{
corner
=
1
;
// 右下
}
return
corner
;
}
/**
* 图片边缘检测检测时,计算图片偏移量
*/
export
function
calcImageOffset
(
data
,
scale
)
{
let
left
=
data
.
imageLeft
;
let
top
=
data
.
imageTop
;
scale
=
scale
||
data
.
scale
;
let
imageWidth
=
data
.
imageWidth
;
let
imageHeight
=
data
.
imageHeight
;
if
((
data
.
angle
/
90
)
%
2
)
{
imageWidth
=
data
.
imageHeight
;
imageHeight
=
data
.
imageWidth
;
}
const
{
clipX
,
clipWidth
,
clipY
,
clipHeight
}
=
data
;
// 当前图片宽度/高度
const
currentImageSize
=
(
size
)
=>
(
size
*
scale
)
/
2
;
const
currentImageWidth
=
currentImageSize
(
imageWidth
);
const
currentImageHeight
=
currentImageSize
(
imageHeight
);
left
=
clipX
+
currentImageWidth
>=
left
?
left
:
clipX
+
currentImageWidth
;
left
=
clipX
+
clipWidth
-
currentImageWidth
<=
left
?
left
:
clipX
+
clipWidth
-
currentImageWidth
;
top
=
clipY
+
currentImageHeight
>=
top
?
top
:
clipY
+
currentImageHeight
;
top
=
clipY
+
clipHeight
-
currentImageHeight
<=
top
?
top
:
clipY
+
clipHeight
-
currentImageHeight
;
return
{
left
,
top
,
scale
};
}
/**
* 图片边缘检测时,计算图片缩放比例
*/
export
function
calcImageScale
(
data
,
scale
)
{
scale
=
scale
||
data
.
scale
;
let
{
imageWidth
,
imageHeight
,
clipWidth
,
clipHeight
,
angle
}
=
data
if
((
angle
/
90
)
%
2
)
{
imageWidth
=
imageHeight
;
imageHeight
=
imageWidth
;
}
if
(
imageWidth
*
scale
<
clipWidth
)
{
scale
=
clipWidth
/
imageWidth
;
}
if
(
imageHeight
*
scale
<
clipHeight
)
{
scale
=
Math
.
max
(
scale
,
clipHeight
/
imageHeight
);
}
return
scale
;
}
/**
* 计算图片尺寸
*/
export
function
calcImageSize
(
width
,
height
,
data
)
{
let
imageWidth
=
width
,
imageHeight
=
height
;
let
{
clipWidth
,
clipHeight
,
sysinfo
,
width
:
originWidth
,
height
:
originHeight
}
=
data
if
(
imageWidth
&&
imageHeight
)
{
if
(
imageWidth
/
imageHeight
>
(
clipWidth
||
originWidth
)
/
(
clipWidth
||
originHeight
))
{
imageHeight
=
clipHeight
||
originHeight
;
imageWidth
=
(
width
/
height
)
*
imageHeight
;
}
else
{
imageWidth
=
clipWidth
||
originWidth
;
imageHeight
=
(
height
/
width
)
*
imageWidth
;
}
}
else
{
let
sys
=
sysinfo
||
uni
.
getSystemInfoSync
();
imageWidth
=
sys
.
windowWidth
;
imageHeight
=
0
;
}
return
{
imageWidth
,
imageHeight
};
}
/**
* 勾股定理求斜边
*/
export
function
calcPythagoreanTheorem
(
width
,
height
)
{
return
Math
.
sqrt
(
Math
.
pow
(
width
,
2
)
+
Math
.
pow
(
height
,
2
));
}
/**
* 拖动裁剪框时计算
*/
export
function
clipTouchMoveOfCalculate
(
data
,
event
)
{
const
clientX
=
event
.
touches
[
0
].
clientX
;
const
clientY
=
event
.
touches
[
0
].
clientY
;
let
{
clipWidth
,
clipHeight
,
clipY
:
oldClipY
,
clipX
:
oldClipX
,
clipStart
,
isLockRatio
,
maxWidth
,
minWidth
,
maxHeight
,
minHeight
}
=
data
;
maxWidth
=
maxWidth
/
2
;
minWidth
=
minWidth
/
2
;
minHeight
=
minHeight
/
2
;
maxHeight
=
maxHeight
/
2
;
let
width
=
clipWidth
,
height
=
clipHeight
,
clipY
=
oldClipY
,
clipX
=
oldClipX
,
// 获取裁剪框实际宽度/高度
// 如果大于最大值则使用最大值
// 如果小于最小值则使用最小值
sizecorrect
=
()
=>
{
width
=
width
<=
maxWidth
?
(
width
>=
minWidth
?
width
:
minWidth
)
:
maxWidth
;
height
=
height
<=
maxHeight
?
(
height
>=
minHeight
?
height
:
minHeight
)
:
maxHeight
;
},
sizeinspect
=
()
=>
{
sizecorrect
();
if
((
width
>
maxWidth
||
width
<
minWidth
||
height
>
maxHeight
||
height
<
minHeight
)
&&
isLockRatio
)
{
return
false
;
}
else
{
return
true
;
}
};
//if (clipStart.corner) {
height
=
clipStart
.
height
+
(
clipStart
.
corner
>
1
&&
clipStart
.
corner
<
4
?
1
:
-
1
)
*
(
clipStart
.
y
-
clientY
);
//}
switch
(
clipStart
.
corner
)
{
case
1
:
width
=
clipStart
.
width
-
clipStart
.
x
+
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
return
;
break
;
case
2
:
width
=
clipStart
.
width
-
clipStart
.
x
+
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
clipY
=
clipStart
.
clipY
-
(
height
-
clipStart
.
height
);
}
break
;
case
3
:
width
=
clipStart
.
width
+
clipStart
.
x
-
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
clipY
=
clipStart
.
clipY
-
(
height
-
clipStart
.
height
);
clipX
=
clipStart
.
clipX
-
(
width
-
clipStart
.
width
);
}
break
;
case
4
:
width
=
clipStart
.
width
+
clipStart
.
x
-
clientX
;
if
(
isLockRatio
)
{
height
=
width
/
(
clipWidth
/
clipHeight
);
}
if
(
!
sizeinspect
())
{
return
;
}
else
{
clipX
=
clipStart
.
clipX
-
(
width
-
clipStart
.
width
);
}
break
;
default
:
break
;
}
return
{
width
,
height
,
clipX
,
clipY
};
}
/**
* 单指拖动图片计算偏移
*/
export
function
imageTouchMoveOfCalcOffset
(
data
,
clientXForLeft
,
clientYForLeft
)
{
let
left
=
clientXForLeft
-
data
.
touchRelative
[
0
].
x
,
top
=
clientYForLeft
-
data
.
touchRelative
[
0
].
y
;
return
{
left
,
top
};
}
pages/ucenter/userinfo/uploadCutImageToUnicloud.vue
浏览文件 @
a8b1baa4
...
...
@@ -11,20 +11,14 @@ export default {
data
()
{
return
{
path
:
''
,
options
:{
"
width
"
:
600
,
"
height
"
:
600
}}},
onLoad
({
path
,
options
})
{
this
.
path
=
path
console
.
log
(
'
path-path-path-path
'
,
path
);
if
(
options
){
this
.
options
=
JSON
.
parse
(
options
)
}
},
methods
:{
successFn
(
e
){
// uni.getImageInfo({
// src:e.url,
// complete: (e) => {
// console.log(e);
// }
// })
this
.
uploadImgToUnicloud
(
e
.
url
,(
url
)
=>
{
//console.log(url);
this
.
getOpenerEventChannel
().
emit
(
'
uploadAvatarAfter
'
,
{
url
})
uni
.
navigateBack
()
})
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录