Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
SuperMan
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
1
Issues
1
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
罗超
SuperMan
Commits
a65ed411
Commit
a65ed411
authored
Aug 30, 2023
by
黄奎
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://gitlab.oytour.com/luochao/superman
parents
380e314a
3a5f180b
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
300 additions
and
117 deletions
+300
-117
UpgradedVersion.css
src/assets/css/UpgradedVersion.css
+1
-0
tripIndexNew.css
src/assets/css/tripIndexNew.css
+154
-11
ItineraryFeatures.vue
src/components/LeaveGroupDownload/ItineraryFeatures.vue
+0
-8
header.vue
src/components/LeaveGroupDownload/components/header.vue
+4
-4
travelDays.vue
src/components/LeaveGroupDownload/travelDays.vue
+73
-90
TravelNotice.vue
...ponents/TravelManager/TravelGroupControl/TravelNotice.vue
+1
-1
confirmationOrderDownLoadNew.vue
src/components/confirmationOrderDownLoadNew.vue
+2
-3
index.js
src/plug/index.js
+65
-0
No files found.
src/assets/css/UpgradedVersion.css
View file @
a65ed411
...
...
@@ -74,6 +74,7 @@
.UpgradedVersion-box
{
width
:
1123px
;
height
:
1588px
;
overflow
:
hidden
;
}
.UpgradedVersion-homebj
{
background
:
url('http://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')
no-repeat
center
;
...
...
src/assets/css/tripIndexNew.css
View file @
a65ed411
*
{
/* font-family: FZCuSong-B09S; */
.bjE6
{
background
:
#e6e6e6
;
}
.bjF6
{
background
:
#f6f6f6
;
}
.relative
{
position
:
relative
;
}
.absolute
{
position
:
absolute
;
}
.z-index1
{
z-index
:
1
;
}
.z-index2
{
z-index
:
2
;
}
.z-index3
{
z-index
:
3
;
}
.row
{
display
:
flex
;
}
.row-aic
{
display
:
flex
;
align-items
:
center
;
}
.row-ajc
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
.row-sb
{
display
:
flex
;
justify-content
:
space-between
;
}
.row-sb-nowrap
{
display
:
flex
;
justify-content
:
space-between
;
flex-wrap
:
nowrap
;
}
.column
{
display
:
flex
;
flex-direction
:
column
;
}
.column-ajc
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
center
;
}
.marginL20
{
margin-left
:
20px
;
}
.marginL11
{
margin-left
:
11px
;
}
.marginL15
{
margin-left
:
15px
;
}
.marginT20
{
margin-top
:
20px
;
}
.marginT10
{
margin-top
:
10px
;
}
.marginT13
{
margin-top
:
13px
;
}
.marginT14
{
margin-top
:
14px
;
}
.pkey
{
color
:
grey
!important
;
...
...
@@ -97,7 +167,7 @@
.travelDaysTitlle-left-text
{
width
:
173px
;
height
:
173px
;
background
:
url('http
://192.168.10.214:8130/Upload
/NewTripFeature/Shape.png')
no-repeat
center
;
background
:
url('http
s://imgfile.oytour.com/Static
/NewTripFeature/Shape.png')
no-repeat
center
;
background-size
:
100%
100%
;
}
.travelDaysTitlle-left-textOne
{
...
...
@@ -151,7 +221,7 @@
font-size
:
26px
;
font-family
:
PingFang
SC
;
font-weight
:
500
;
color
:
#FEFEFE
;
/* color: #FEFEFE; */
line-height
:
34px
;
text-align
:
center
;
}
...
...
@@ -163,7 +233,6 @@
width
:
335px
;
height
:
189px
;
overflow
:
hidden
;
background
:
#2A2A2A
;
border
:
2px
solid
#FFFFFF
;
border-radius
:
18px
;
}
...
...
@@ -171,12 +240,13 @@
font-size
:
26px
;
font-family
:
PingFang
SC
;
font-weight
:
500
;
color
:
#FEFEFE
;
line-height
:
34px
;
}
.travelDaysContent
{
max-height
:
468px
;
line-height
:
38px
;
padding
:
41px
44px
47px
44px
;
overflow
:
hidden
;
}
.travelDaysContent-text
{
font-size
:
21px
;
...
...
@@ -192,13 +262,13 @@
padding
:
0
36px
115px
36px
;
}
.travelDaysdetailsBJ
{
border-radius
:
45
px
;
border-radius
:
100
px
;
flex-wrap
:
wrap
;
padding
:
20px
35px
;
-webkit-border-radius
:
45
px
;
-moz-border-radius
:
45
px
;
-ms-border-radius
:
45
px
;
-o-border-radius
:
45
px
;
-webkit-border-radius
:
100
px
;
-moz-border-radius
:
100
px
;
-ms-border-radius
:
100
px
;
-o-border-radius
:
100
px
;
}
.travelDaysdetails-text
{
flex-wrap
:
nowrap
;
...
...
@@ -220,3 +290,76 @@
padding
:
0
;
margin
:
0
;
}
.UpgradedVersion-box
{
width
:
1123px
;
height
:
1588px
;
overflow
:
hidden
;
}
.UpgradedVersion-homebj
{
background
:
url('https://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')
no-repeat
center
;
background-size
:
100%
100%
;
}
.UpgradedVersion-introduceBj
{
background
:
url('https://imgfile.oytour.com/Static/NewTripFeature/otherBjTwo.png')
no-repeat
center
;
background-size
:
100%
100%
;
}
.UpgradedVersion-otherBj
{
background
:
#fff
;
}
.UpgradedVersion-Hover
{
cursor
:
pointer
;
}
.UpgradedVersion-Hover
:hover
.featureControls
{
opacity
:
1
;
}
.otherJourney-introduceFooter
{
left
:
0
;
right
:
0
;
bottom
:
32px
;
width
:
100%
;
height
:
34px
;
background-size
:
100%
100%
;
}
.introduceFooterBJ
{
height
:
100%
;
}
.introduceFooterOne
{
flex-grow
:
1
;
margin-right
:
5px
;
}
.introduceFootertTwo
,
.introduceFootertThree
{
width
:
7px
;
}
.introduceFootertFour
{
width
:
120px
;
margin-left
:
5px
;
}
.introduceFooter-text
{}
.introduceFooter-text
img
{
width
:
28px
;
height
:
28px
;
display
:
inline-block
;
margin
:
0
9px
;
}
.introduceFooter-text
.edit_div
{
line-height
:
34px
;
text-align
:
center
;
overflow
:
hidden
;
font-size
:
22px
;
font-family
:
FZCuSong-B09S
;
font-weight
:
400
;
color
:
#2A2A2A
;
margin
:
0
9px
0
0
;
}
.otherJourney-footer
.edit_div
{
display
:
none
;
}
src/components/LeaveGroupDownload/ItineraryFeatures.vue
View file @
a65ed411
...
...
@@ -43,13 +43,5 @@
</
script
>
<
style
>
.travelDays-box
{
position
:
absolute
;
left
:
0
;
top
:
112px
;
right
:
0
;
bottom
:
115px
;
border
:
1px
solid
#ddd
;
}
</
style
>
src/components/LeaveGroupDownload/components/header.vue
View file @
a65ed411
...
...
@@ -2,7 +2,7 @@
<div
class=
"UpgradedVersion-header absolute row-sb z-index1"
>
<div
class=
"UpgradedVersion-header-left relative row-aic"
:style=
"
{'background':TripColor}">
<img
class=
"header-leftBj absolute z-index2"
:src=
"backgroundImgBj2"
/>
<img
class=
"header-leftImg"
src=
"http
://192.168.10.214:8130/Upload
/NewTripFeature/headerLogoTwo.png"
/>
<img
class=
"header-leftImg"
src=
"http
s://imgfile.oytour.com/Static
/NewTripFeature/headerLogoTwo.png"
/>
</div>
<div
class=
"UpgradedVersion-header-right"
>
<div
class=
"UpgradedVersion-header-title"
>
...
...
@@ -25,8 +25,8 @@
canEdit
:
true
,
LineShortName
:
'欧洲线'
,
backgroundImg
:
''
,
backgroundImgBj1
:
'http
://192.168.10.214:8130/Upload
/NewTripFeature/logoBjOne.png'
,
//花纹背景
backgroundImgBj2
:
'http
://192.168.10.214:8130/Upload
/NewTripFeature/logoBjTwo.png'
,
//白色背景
backgroundImgBj1
:
'http
s://imgfile.oytour.com/Static
/NewTripFeature/logoBjOne.png'
,
//花纹背景
backgroundImgBj2
:
'http
s://imgfile.oytour.com/Static
/NewTripFeature/logoBjTwo.png'
,
//白色背景
};
},
methods
:
{
...
...
@@ -36,7 +36,7 @@
watch
:
{
TripColor
:
{
handler
(
val
,
oldVal
)
{
// this.backgroundImg = `url('http
://192.168.10.214:8130/Upload
/NewTripFeature/logoBj.png') no-repeat right ${val}`
// this.backgroundImg = `url('http
s://imgfile.oytour.com/Static
/NewTripFeature/logoBj.png') no-repeat right ${val}`
},
deep
:
false
,
immediate
:
true
...
...
src/components/LeaveGroupDownload/travelDays.vue
View file @
a65ed411
...
...
@@ -25,27 +25,27 @@
</div>
<div
class=
"travelDaysTitlle-right"
>
<div
class=
"travelDaysTitlle-right-text"
:style=
"
{'background': TripColor,'font-size':'30px'}">
北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴
塞罗那(约 253km,约 3h)
:style=
"
{'background': TripColor,'font-size': getFontSize(title),'color':textColor}">
{{
title
}}
</div>
</div>
</div>
<div
class=
"travelDaysMasterMap relative"
>
<div
class=
"travelDaysMasterMap relative"
:style=
"
{'color':textColorOne}">
<div
class=
"travelDaysMasterMap-one"
>
<div
class=
"travelDaysMasterMap-oneImg"
>
<img
src=
"http
://192.168.10.214:8130/Upload
/NewTripFeature/homeBj.png"
>
<div
class=
"travelDaysMasterMap-oneImg
bjF6"
id=
"uploadImg
"
>
<img
src=
"http
s://imgfile.oytour.com/Static
/NewTripFeature/homeBj.png"
>
</div>
<div
class=
"travelDaysMasterMap-text absolute z-index2"
>
塞维利亚西班牙广场
</div>
</div>
<div
class=
"travelDaysMasterMap-two absolute z-index2"
>
<div
class=
"travelDaysMasterMap-twoImg relative"
>
<img
src=
"http
://192.168.10.214:8130/Upload
/NewTripFeature/homeBj.png"
>
<div
class=
"travelDaysMasterMap-twoImg relative
bjF6
"
>
<img
src=
"http
s://imgfile.oytour.com/Static
/NewTripFeature/homeBj.png"
>
<div
class=
"travelDaysMasterMap-text textTwo absolute z-index2"
>
【米其林烤乳猪】
</div>
</div>
<div
class=
"travelDaysMasterMap-twoImg relative"
style=
"margin-top: 47px;"
>
<img
src=
"http
://192.168.10.214:8130/Upload
/NewTripFeature/homeBj.png"
>
<div
class=
"travelDaysMasterMap-twoImg relative
bjF6
"
style=
"margin-top: 47px;"
>
<img
src=
"http
s://imgfile.oytour.com/Static
/NewTripFeature/homeBj.png"
>
<div
class=
"travelDaysMasterMap-text textTwo absolute z-index2"
>
【米其林烤乳猪】
</div>
</div>
</div>
...
...
@@ -56,6 +56,25 @@
<span>
【塞维利亚斗牛场】
</span>
(外观,约 20 分钟)西班牙历史最悠久的斗牛场。每年举行的“阿布利尔节”的场所
</div>
<div
class=
"travelDaysContent-text"
>
<span>
【圣十字区-旧犹太区】
</span>
(约 30 分钟)是塞维利亚的老城区,具有典型的安达卢西亚风格
</div>
<div
class=
"travelDaysContent-text"
>
<span>
【塞维利亚王宫】
</span>
(外观,约 20 分钟),这座欧洲最古老的皇家宫殿,在 1987 年就已经被选为世界文化遗产。
王宫中最大的亮点,就是由佩德罗一世建造的美轮美奂的佩德罗宫殿,在《权力的游戏》中,这里被称为“流水花园”(Water Gardens),混合了摩尔人阿拉伯式和欧洲哥特式两种建筑风格;
</div>
<div
class=
"travelDaysContent-text"
>
<span>
【西班牙广场】
</span>
(约 20 分钟),它是摩尔复兴建筑的缩影,1929 年拉美博览会的场地之一,在广场上可以看到西班牙不同的建筑风格,包括哥特风格、摩尔风格以及银匠风格。
</div>
<div
class=
"travelDaysContent-text"
>
<span>
【特别体验】
</span>
赠送:1、西班牙国粹-佛朗明哥舞 2、塞维利亚广场马车游(4 人一马车),感受这里历史的马
车,是这里最亮眼的风景线。一排排马车一字排开,历史的画面扑面而来,乘坐在马车上也将带着您一览塞维
利亚城市一角的风采。
</div>
</div>
<div
class=
"travelDaysdetails"
>
...
...
@@ -79,6 +98,20 @@
</div>
</div>
</div>
<!-- otherJourney-footer -->
<div>
<div
class=
"otherJourney-introduceFooter absolute z-index1 row-aic"
:style=
"
{'background':''}">
<div
class=
"introduceFooterBJ introduceFooterOne"
:style=
"
{'background':TripColor}">
</div>
<div
class=
"introduceFooterBJ introduceFootertTwo"
:style=
"
{'background':TripColor}">
</div>
<div
class=
"introduceFooter-text row-aic"
>
<img
src=
"http://imgfile.oytour.com/Static/NewTripFeature/footerLogo.png"
/>
<div
class=
"edit_div"
>
欧洲线
</div>
</div>
<div
class=
"introduceFooterBJ introduceFootertThree"
:style=
"
{'background':TripColor}">
</div>
<div
class=
"introduceFooterBJ introduceFootertFour"
:style=
"
{'background':TripColor}">
</div>
</div>
</div>
</div>
</div>
...
...
@@ -95,91 +128,21 @@
props
:
[
'TripColor'
],
data
()
{
return
{
title
:
'北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那(约 253km,约 3h)北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那(约 253km,约 3h)'
,
day
:
'DAY'
,
backgroundColor
:
''
backgroundColor
:
''
,
textColor
:
''
,
textColorOne
:
''
,
};
},
methods
:
{
UploadImg
(
index
,
type
)
{
this
.
MasterMapIndex
=
index
?
index
:
0
if
(
type
)
this
.
StencilDrawing
=
true
else
this
.
StencilDrawing
=
false
if
(
this
.
FeatureItem
.
pageType
==
2
){
document
.
querySelector
(
`#introducefile_
${(
this
.
index
*
2
+
1
)}
_0`
).
click
();
getFontSize
(
title
){
if
(
title
.
length
>
60
){
return
929
/
60
+
'px'
}
else
{
document
.
querySelector
(
`#travelDays_
${(
this
.
index
*
2
+
1
)}
`
).
click
();
return
'30px'
}
},
uploadpic
(
e
)
{
let
that
=
this
;
if
(
e
.
target
.
files
.
length
>
0
&&
e
.
target
.
files
[
0
].
size
>
0
)
{
var
reader
=
new
FileReader
();
reader
.
onload
=
function
(
event
)
{
let
blob
=
that
.
base64ToBlob
(
event
.
target
.
result
);
let
newArr
=
[];
newArr
.
push
(
blob
);
var
fileName
=
`
${
that
.
uuid
(
10
,
10
)}
.png`
;
var
path
=
`/newFeature`
;
that
.
uploadSelfBlob
(
path
,
newArr
,
x
=>
{
let
allPath
=
that
.
domainManager
().
ViittoFileUrl
+
x
.
data
.
FilePath
;
let
i
=
e
.
target
.
id
.
split
(
"_"
)[
2
];
if
(
that
.
StencilDrawing
){
that
.
FeatureItem
.
dataObj
.
SubList
[
that
.
MasterMapIndex
].
url
=
allPath
}
else
{
that
.
FeatureItem
.
dataObj
.
ImgList
[
that
.
MasterMapIndex
].
url
=
allPath
}
});
};
reader
.
readAsDataURL
(
e
.
target
.
files
[
0
]);
}
},
SelectImg
(
index
,
type
)
{
this
.
MasterMapIndex
=
index
?
index
:
0
if
(
type
)
this
.
StencilDrawing
=
true
else
this
.
StencilDrawing
=
false
if
(
this
.
FeatureData
.
pageType
==
3
)
this
.
choseType
=
2
else
if
(
this
.
FeatureData
.
pageType
==
4
)
this
.
choseType
=
1
else
if
(
this
.
FeatureData
.
pageType
==
5
)
this
.
choseType
=
2
else
if
(
this
.
FeatureData
.
pageType
==
6
)
this
.
choseType
=
3
else
this
.
choseType
=
0
this
.
isShowScenicImg
=
true
},
AddImg
()
{
let
obj
=
{
url
:
''
}
this
.
FeatureItem
.
dataObj
.
ImgList
.
push
(
obj
)
},
DeleteImg
(
index
,
type
)
{
if
(
type
)
this
.
StencilDrawing
=
true
else
this
.
StencilDrawing
=
false
if
(
this
.
StencilDrawing
){
this
.
FeatureItem
.
dataObj
.
SubList
.
splice
(
index
,
1
)
}
else
{
this
.
FeatureItem
.
dataObj
.
ImgList
.
splice
(
index
,
1
)
}
},
toAddPages
()
{
this
.
$emit
(
'toAddPages'
,
this
.
index
,
this
.
FeatureItem
)
},
toDeletePages
()
{
this
.
$emit
(
'toDeletePages'
,
this
.
index
,
this
.
FeatureItem
)
},
setTemplate
(
TemplateType
)
{
this
.
FeatureItem
.
pageTemplate
=
TemplateType
},
closeDMCchooseImg
()
{
this
.
isShowScenicImg
=
false
},
getDMCimg
(
selectImgArr
)
{
let
Path
=
selectImgArr
[
0
].
Path
if
(
this
.
StencilDrawing
){
this
.
FeatureItem
.
dataObj
.
SubList
[
this
.
MasterMapIndex
].
url
=
Path
}
else
{
this
.
FeatureItem
.
dataObj
.
ImgList
[
this
.
MasterMapIndex
].
url
=
Path
}
this
.
isShowScenicImg
=
false
}
...
...
@@ -189,6 +152,15 @@
TripColor
:
{
handler
(
val
,
oldVal
)
{
this
.
backgroundColor
=
this
.
hexToRgb
(
val
,
0.15
)
let
rgba
=
this
.
hexToRgb
(
val
,
1
)
rgba
=
rgba
.
split
(
','
)
let
rgba0
=
rgba
[
0
].
split
(
'('
)
let
arr
=
[
rgba0
[
1
],
rgba
[
1
],
rgba
[
2
]]
if
(
this
.
getRgbLevel
(
arr
)
>
50
){
this
.
textColor
=
"#fff"
}
else
{
this
.
textColor
=
"#333"
}
},
deep
:
false
,
immediate
:
true
...
...
@@ -202,14 +174,25 @@
// },
},
mounted
()
{
let
bj
=
'https://imgfile.oytour.com/Static/NewTripFeature/homeBj.png'
this
.
canvasImgColor
(
bj
,
(
callback
)
=>
{
this
.
textColor
=
callback
let
rgba
=
callback
rgba
=
rgba
.
split
(
','
)
let
rgba0
=
rgba
[
0
].
split
(
'('
)
let
arr
=
[
rgba0
[
1
],
rgba
[
1
],
rgba
[
2
]]
if
(
this
.
getRgbLevel
(
arr
)
>
50
){
this
.
textColorOne
=
"#fff"
}
else
{
this
.
textColorOne
=
"#333"
}
})
}
};
</
script
>
<
style
>
@import
url("../../assets/css/UpgradedVersion.css")
;
</
style
>
src/components/TravelManager/TravelGroupControl/TravelNotice.vue
View file @
a65ed411
...
...
@@ -20,7 +20,7 @@
v-bind:toolbarShow=
"toolbar"
v-bind:referenceList=
"FeeNonIncludeArr"
></my-edit>
<div
class=
"TNtitle NotContain"
>
自费安排
==
自费安排
</div>
<table
class=
"TFTable TNtable"
>
<thead>
...
...
src/components/confirmationOrderDownLoadNew.vue
View file @
a65ed411
...
...
@@ -202,7 +202,6 @@
<div
id=
"pdfNode"
class=
"LeaveGroupDownload-form"
>
<div
id=
"pdfDom"
style=
"padding:0 20px;"
>
<!-- 首页 -->
<!--
<LeaveGroupDownload
:vshowJ=
"vshowJ"
:vshowL=
"vshowL"
...
...
@@ -211,9 +210,9 @@
:orderTripdiff=
"orderTripdiff"
:vshowLLR=
"vshowLLR"
:vshowB=
"vshowB"
:lineId="lineId"></LeaveGroupDownload>
-->
:lineId=
"lineId"
></LeaveGroupDownload>
<!-- 行程特色 -->
<
!-- <ItineraryFeatures :feature="feature"></ItineraryFeatures> --
>
<
ItineraryFeatures
:feature=
"feature"
></ItineraryFeatures
>
<travelDays
:TripColor=
"TripColor"
></travelDays>
</div>
</div>
...
...
src/plug/index.js
View file @
a65ed411
...
...
@@ -1739,6 +1739,71 @@ export default {
var
b
=
parseInt
(
rgb
[
3
],
16
);
return
'rgba('
+
r
+
','
+
g
+
','
+
b
+
','
+
opc
+
')'
;
}
// 颜色深浅
Vue
.
prototype
.
getRgbLevel
=
function
(
arr
)
{
return
arr
[
0
]
*
0.299
+
arr
[
1
]
*
0.587
+
arr
[
2
]
*
0.114
;
}
// 获取图片颜色
Vue
.
prototype
.
canvasImgColor
=
function
(
imgs
,
callback
)
{
var
imgSrc
=
imgs
var
upload
=
document
.
getElementById
(
'uploadImg'
)
const
imgEle
=
document
.
createElement
(
'img'
)
const
canvas
=
document
.
createElement
(
'canvas'
)
imgEle
.
src
=
imgSrc
imgEle
.
crossOrigin
=
''
;
imgEle
.
onload
=
()
=>
{
var
ctx
=
canvas
.
getContext
(
"2d"
);
var
naturalImgSize
=
[
imgEle
.
naturalWidth
,
imgEle
.
naturalHeight
];
canvas
.
width
=
naturalImgSize
[
0
];
canvas
.
height
=
naturalImgSize
[
1
];
//绘制到canvas
ctx
.
drawImage
(
imgEle
,
0
,
0
);
//获取imageData:rgba像素点
var
imgData
=
ctx
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
const
leftSectionData
=
[]
const
rightSectionData
=
[]
const
oneLineImgDataLen
=
canvas
.
width
*
4
;
imgData
.
data
.
forEach
((
colorVal
,
i
)
=>
{
if
(
i
%
oneLineImgDataLen
<=
0.5
*
oneLineImgDataLen
||
i
%
oneLineImgDataLen
>=
0.6
*
oneLineImgDataLen
)
{
const
inLeft
=
i
%
oneLineImgDataLen
<=
0.5
*
oneLineImgDataLen
if
(
i
%
4
===
0
)
{
// 获取rgb均值
const
curAverageRGB
=
(
imgData
.
data
[
i
]
+
imgData
.
data
[
i
+
1
]
+
imgData
.
data
[
i
+
2
])
/
3
;
let
leftOrRightRef
=
inLeft
?
leftSectionData
:
rightSectionData
;
//每个数组里存四个值:本颜色值中的r、g、b的均值,以及r、g、b三个值。
//均值一方面用于累加计算本区域的整体均值,然后再跟每个均值对比拿到与整体均值最接近的项的索引,再取该数组里的后三个值:rgb,对应着颜色
leftOrRightRef
[
leftOrRightRef
.
length
]
=
[
curAverageRGB
,
imgData
.
data
[
i
],
imgData
.
data
[
i
+
1
],
imgData
.
data
[
i
+
2
]]
}
}
})
//generate average rgb
const
averageOfLeft
=
Math
.
round
(
leftSectionData
.
reduce
((
_cur
,
item
)
=>
{
return
_cur
+
item
[
0
]
},
0
)
/
leftSectionData
.
length
)
const
averageOfRight
=
Math
.
round
(
rightSectionData
.
reduce
((
_cur
,
item
)
=>
{
return
_cur
+
item
[
0
]
},
0
)
/
rightSectionData
.
length
)
//find the most near color
const
findNearestIndex
=
(
averageVal
,
arrBox
)
=>
{
let
_gapValue
=
Math
.
abs
(
averageVal
-
arrBox
[
0
])
let
_nearColorIndex
=
0
arrBox
.
forEach
((
item
,
index
)
=>
{
const
curGapValue
=
Math
.
abs
(
item
-
averageVal
)
if
(
curGapValue
<
_gapValue
)
{
_gapValue
=
curGapValue
_nearColorIndex
=
index
}
})
return
_nearColorIndex
}
const
leftNearestColor
=
leftSectionData
[
findNearestIndex
(
averageOfLeft
,
leftSectionData
)]
const
rightNearestColor
=
rightSectionData
[
findNearestIndex
(
averageOfRight
,
rightSectionData
)]
upload
.
style
.
backgroundColor
=
`rgba(
${
leftNearestColor
[
1
]}
,
${
leftNearestColor
[
2
]}
,
${
leftNearestColor
[
3
]}
,1) 0%,rgba(
${
rightNearestColor
[
1
]}
,
${
rightNearestColor
[
2
]}
,
${
rightNearestColor
[
3
]}
,1)`
callback
(
upload
.
style
.
backgroundColor
)
}
}
Vue
.
prototype
.
base64ToBlob
=
function
(
code
)
{
let
parts
=
code
.
split
(
";base64,"
);
let
contentType
=
parts
[
0
].
split
(
":"
)[
1
];
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment