Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-front
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
beyond-clouds-front
Commits
950a6b05
Commit
950a6b05
authored
Apr 09, 2020
by
yanju
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of coding.yundingshuyuan.com:pigbigbig/beyond-clouds-front
parents
1aaafe72
197402d0
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
347 additions
and
1 deletions
+347
-1
assets/gray-filter.css
+1
-0
nuxt.config.js
+2
-1
static/grayscale.js
+344
-0
No files found.
assets/gray-filter.css
0 → 100644
View file @
950a6b05
html
{
filter
:
progid
:
DXImageTransform
.
Microsoft
.
BasicImage
(
grayscale
=
1
);
-webkit-filter
:
grayscale
(
100%
);
filter
:
grayscale
(
100%
);}
nuxt.config.js
View file @
950a6b05
...
...
@@ -19,7 +19,7 @@ module.exports = {
],
link
:
[
{
rel
:
'icon'
,
type
:
'image/x-icon'
,
href
:
'/favicon.ico'
}
]
,
]
},
/*
** Customize the progress-bar color
...
...
@@ -29,6 +29,7 @@ module.exports = {
** Global CSS
*/
css
:
[
// '~/assets/gray-filter.css',
'~/assets/font/iconfont.css'
,
'~/assets/reset.scss'
,
],
...
...
static/grayscale.js
0 → 100644
View file @
950a6b05
/*
* -- grayscale.js --
* Copyright (C) James Padolsey (http://james.padolsey.com)
*
*/
var
grayscale
=
(
function
(){
var
config
=
{
colorProps
:
[
'color'
,
'backgroundColor'
,
'borderBottomColor'
,
'borderTopColor'
,
'borderLeftColor'
,
'borderRightColor'
,
'backgroundImage'
],
externalImageHandler
:
{
/* Grayscaling externally hosted images does not work
- Use these functions to handle those images as you so desire */
/* Out of convenience these functions are also used for browsers
like Chrome that do not support CanvasContext.getImageData */
init
:
function
(
el
,
src
)
{
if
(
el
.
nodeName
.
toLowerCase
()
===
'img'
)
{
// Is IMG element...
}
else
{
// Is background-image element:
// Default - remove background images
data
(
el
).
backgroundImageSRC
=
src
;
el
.
style
.
backgroundImage
=
''
;
}
},
reset
:
function
(
el
)
{
if
(
el
.
nodeName
.
toLowerCase
()
===
'img'
)
{
// Is IMG element...
}
else
{
// Is background-image element:
el
.
style
.
backgroundImage
=
'url('
+
(
data
(
el
).
backgroundImageSRC
||
''
)
+
')'
;
}
}
}
},
log
=
function
(){
try
{
window
.
console
.
log
.
apply
(
console
,
arguments
);
}
catch
(
e
)
{};
},
isExternal
=
function
(
url
)
{
// Checks whether URL is external: 'CanvasContext.getImageData'
// only works if the image is on the current domain.
return
(
new
RegExp
(
'https?://(?!'
+
window
.
location
.
hostname
+
')'
)).
test
(
url
);
},
data
=
(
function
(){
var
cache
=
[
0
],
expando
=
'data'
+
(
+
new
Date
());
return
function
(
elem
)
{
var
cacheIndex
=
elem
[
expando
],
nextCacheIndex
=
cache
.
length
;
if
(
!
cacheIndex
)
{
cacheIndex
=
elem
[
expando
]
=
nextCacheIndex
;
cache
[
cacheIndex
]
=
{};
}
return
cache
[
cacheIndex
];
};
})(),
desatIMG
=
function
(
img
,
prepare
,
realEl
)
{
// realEl is only set when img is temp (for BG images)
var
canvas
=
document
.
createElement
(
'canvas'
),
context
=
canvas
.
getContext
(
'2d'
),
height
=
img
.
naturalHeight
||
img
.
offsetHeight
||
img
.
height
,
width
=
img
.
naturalWidth
||
img
.
offsetWidth
||
img
.
width
,
imgData
;
canvas
.
height
=
height
;
canvas
.
width
=
width
;
context
.
drawImage
(
img
,
0
,
0
);
try
{
imgData
=
context
.
getImageData
(
0
,
0
,
width
,
height
);
}
catch
(
e
)
{}
if
(
prepare
)
{
desatIMG
.
preparing
=
true
;
// Slowly recurse through pixels for prep,
// :: only occurs on grayscale.prepare()
var
y
=
0
;
(
function
(){
if
(
!
desatIMG
.
preparing
)
{
return
;
}
if
(
y
===
height
)
{
// Finished!
context
.
putImageData
(
imgData
,
0
,
0
,
0
,
0
,
width
,
height
);
realEl
?
(
data
(
realEl
).
BGdataURL
=
canvas
.
toDataURL
())
:
(
data
(
img
).
dataURL
=
canvas
.
toDataURL
())
}
for
(
var
x
=
0
;
x
<
width
;
x
++
)
{
var
i
=
(
y
*
width
+
x
)
*
4
;
// Apply Monoschrome level across all channels:
imgData
.
data
[
i
]
=
imgData
.
data
[
i
+
1
]
=
imgData
.
data
[
i
+
2
]
=
RGBtoGRAYSCALE
(
imgData
.
data
[
i
],
imgData
.
data
[
i
+
1
],
imgData
.
data
[
i
+
2
]);
}
y
++
;
setTimeout
(
arguments
.
callee
,
0
);
})();
return
;
}
else
{
// If desatIMG was called without 'prepare' flag
// then cancel recursion and proceed with force! (below)
desatIMG
.
preparing
=
false
;
}
for
(
var
y
=
0
;
y
<
height
;
y
++
)
{
for
(
var
x
=
0
;
x
<
width
;
x
++
)
{
var
i
=
(
y
*
width
+
x
)
*
4
;
// Apply Monoschrome level across all channels:
imgData
.
data
[
i
]
=
imgData
.
data
[
i
+
1
]
=
imgData
.
data
[
i
+
2
]
=
RGBtoGRAYSCALE
(
imgData
.
data
[
i
],
imgData
.
data
[
i
+
1
],
imgData
.
data
[
i
+
2
]);
}
}
context
.
putImageData
(
imgData
,
0
,
0
,
0
,
0
,
width
,
height
);
return
canvas
;
},
getStyle
=
function
(
el
,
prop
)
{
var
style
=
document
.
defaultView
&&
document
.
defaultView
.
getComputedStyle
?
document
.
defaultView
.
getComputedStyle
(
el
,
null
)[
prop
]
:
el
.
currentStyle
[
prop
];
// If format is #FFFFFF: (convert to RGB)
if
(
style
&&
/^#
[
A-F0-9
]
/i
.
test
(
style
))
{
var
hex
=
style
.
match
(
/
[
A-F0-9
]{2}
/ig
);
style
=
'rgb('
+
parseInt
(
hex
[
0
],
16
)
+
','
+
parseInt
(
hex
[
1
],
16
)
+
','
+
parseInt
(
hex
[
2
],
16
)
+
')'
;
}
return
style
;
},
RGBtoGRAYSCALE
=
function
(
r
,
g
,
b
)
{
// Returns single monochrome figure:
return
parseInt
(
(
0.2125
*
r
)
+
(
0.7154
*
g
)
+
(
0.0721
*
b
),
10
);
},
getAllNodes
=
function
(
context
)
{
var
all
=
Array
.
prototype
.
slice
.
call
(
context
.
getElementsByTagName
(
'*'
));
all
.
unshift
(
context
);
return
all
;
};
var
init
=
function
(
context
)
{
// Handle if a DOM collection is passed instead of a single el:
if
(
context
&&
context
[
0
]
&&
context
.
length
&&
context
[
0
].
nodeName
)
{
// Is a DOM collection:
var
allContexts
=
Array
.
prototype
.
slice
.
call
(
context
),
cIndex
=
-
1
,
cLen
=
allContexts
.
length
;
while
(
++
cIndex
<
cLen
)
{
init
.
call
(
this
,
allContexts
[
cIndex
]);
}
return
;
}
context
=
context
||
document
.
documentElement
;
if
(
!
document
.
createElement
(
'canvas'
).
getContext
)
{
context
.
style
.
filter
=
'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'
;
context
.
style
.
zoom
=
1
;
return
;
}
var
all
=
getAllNodes
(
context
),
i
=
-
1
,
len
=
all
.
length
;
while
(
++
i
<
len
)
{
var
cur
=
all
[
i
];
if
(
cur
.
nodeName
.
toLowerCase
()
===
'img'
)
{
var
src
=
cur
.
getAttribute
(
'src'
);
if
(
!
src
)
{
continue
;
}
if
(
isExternal
(
src
))
{
config
.
externalImageHandler
.
init
(
cur
,
src
);
}
else
{
data
(
cur
).
realSRC
=
src
;
try
{
// Within try statement just encase there's no support....
cur
.
src
=
data
(
cur
).
dataURL
||
desatIMG
(
cur
).
toDataURL
();
}
catch
(
e
)
{
config
.
externalImageHandler
.
init
(
cur
,
src
);
}
}
}
else
{
for
(
var
pIndex
=
0
,
pLen
=
config
.
colorProps
.
length
;
pIndex
<
pLen
;
pIndex
++
)
{
var
prop
=
config
.
colorProps
[
pIndex
],
style
=
getStyle
(
cur
,
prop
);
if
(
!
style
)
{
continue
;}
if
(
cur
.
style
[
prop
])
{
data
(
cur
)[
prop
]
=
style
;
}
// RGB color:
if
(
style
.
substring
(
0
,
4
)
===
'rgb('
)
{
var
monoRGB
=
RGBtoGRAYSCALE
.
apply
(
null
,
style
.
match
(
/
\d
+/g
));
cur
.
style
[
prop
]
=
style
=
'rgb('
+
monoRGB
+
','
+
monoRGB
+
','
+
monoRGB
+
')'
;
continue
;
}
// Background Image:
if
(
style
.
indexOf
(
'url('
)
>
-
1
)
{
var
urlPatt
=
/
\([
'"
]?(
.+
?)[
'"
]?\)
/
,
url
=
style
.
match
(
urlPatt
)[
1
];
if
(
isExternal
(
url
))
{
config
.
externalImageHandler
.
init
(
cur
,
url
);
data
(
cur
).
externalBG
=
true
;
continue
;
}
// data(cur).BGdataURL refers to caches URL (from preparation)
try
{
var
imgSRC
=
data
(
cur
).
BGdataURL
||
(
function
(){
var
temp
=
document
.
createElement
(
'img'
);
temp
.
src
=
url
;
return
desatIMG
(
temp
).
toDataURL
();
})();
cur
.
style
[
prop
]
=
style
.
replace
(
urlPatt
,
function
(
_
,
url
){
return
'('
+
imgSRC
+
')'
;
});
}
catch
(
e
)
{
config
.
externalImageHandler
.
init
(
cur
,
url
);
}
}
}
}
}
};
init
.
reset
=
function
(
context
)
{
// Handle if a DOM collection is passed instead of a single el:
if
(
context
&&
context
[
0
]
&&
context
.
length
&&
context
[
0
].
nodeName
)
{
// Is a DOM collection:
var
allContexts
=
Array
.
prototype
.
slice
.
call
(
context
),
cIndex
=
-
1
,
cLen
=
allContexts
.
length
;
while
(
++
cIndex
<
cLen
)
{
init
.
reset
.
call
(
this
,
allContexts
[
cIndex
]);
}
return
;
}
context
=
context
||
document
.
documentElement
;
if
(
!
document
.
createElement
(
'canvas'
).
getContext
)
{
context
.
style
.
filter
=
'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'
;
return
;
}
var
all
=
getAllNodes
(
context
),
i
=
-
1
,
len
=
all
.
length
;
while
(
++
i
<
len
)
{
var
cur
=
all
[
i
];
if
(
cur
.
nodeName
.
toLowerCase
()
===
'img'
)
{
var
src
=
cur
.
getAttribute
(
'src'
);
if
(
isExternal
(
src
))
{
config
.
externalImageHandler
.
reset
(
cur
,
src
);
}
cur
.
src
=
data
(
cur
).
realSRC
||
src
;
}
else
{
for
(
var
pIndex
=
0
,
pLen
=
config
.
colorProps
.
length
;
pIndex
<
pLen
;
pIndex
++
)
{
if
(
data
(
cur
).
externalBG
)
{
config
.
externalImageHandler
.
reset
(
cur
);
}
var
prop
=
config
.
colorProps
[
pIndex
];
cur
.
style
[
prop
]
=
data
(
cur
)[
prop
]
||
''
;
}
}
}
};
init
.
prepare
=
function
(
context
)
{
// Handle if a DOM collection is passed instead of a single el:
if
(
context
&&
context
[
0
]
&&
context
.
length
&&
context
[
0
].
nodeName
)
{
// Is a DOM collection:
var
allContexts
=
Array
.
prototype
.
slice
.
call
(
context
),
cIndex
=
-
1
,
cLen
=
allContexts
.
length
;
while
(
++
cIndex
<
cLen
)
{
init
.
prepare
.
call
(
null
,
allContexts
[
cIndex
]);
}
return
;
}
// Slowly recurses through all elements
// so as not to lock up on the user.
context
=
context
||
document
.
documentElement
;
if
(
!
document
.
createElement
(
'canvas'
).
getContext
)
{
return
;
}
var
all
=
getAllNodes
(
context
),
i
=
-
1
,
len
=
all
.
length
;
while
(
++
i
<
len
)
{
var
cur
=
all
[
i
];
if
(
data
(
cur
).
skip
)
{
return
;
}
if
(
cur
.
nodeName
.
toLowerCase
()
===
'img'
)
{
if
(
cur
.
getAttribute
(
'src'
)
&&
!
isExternal
(
cur
.
src
))
{
desatIMG
(
cur
,
true
);
}
}
else
{
var
style
=
getStyle
(
cur
,
'backgroundImage'
);
if
(
style
.
indexOf
(
'url('
)
>
-
1
)
{
var
urlPatt
=
/
\([
'"
]?(
.+
?)[
'"
]?\)
/
,
url
=
style
.
match
(
urlPatt
)[
1
];
if
(
!
isExternal
(
url
))
{
var
temp
=
document
.
createElement
(
'img'
);
temp
.
src
=
url
;
desatIMG
(
temp
,
true
,
cur
);
}
}
}
}
};
return
init
;
})();
function
IEVersion
()
{
var
userAgent
=
navigator
.
userAgent
;
//取得浏览器的userAgent字符串
var
isIE
=
userAgent
.
indexOf
(
"compatible"
)
>
-
1
&&
userAgent
.
indexOf
(
"MSIE"
)
>
-
1
;
//判断是否IE<11浏览器
var
isEdge
=
userAgent
.
indexOf
(
"Edge"
)
>
-
1
&&
!
isIE
;
//判断是否IE的Edge浏览器
var
isIE11
=
userAgent
.
indexOf
(
'Trident'
)
>
-
1
&&
userAgent
.
indexOf
(
"rv:11.0"
)
>
-
1
;
if
(
isIE
)
{
var
reIE
=
new
RegExp
(
"MSIE (
\\
d+
\\
.
\\
d+);"
);
reIE
.
test
(
userAgent
);
var
fIEVersion
=
parseFloat
(
RegExp
[
"$1"
]);
if
(
fIEVersion
==
7
)
{
return
7
;
}
else
if
(
fIEVersion
==
8
)
{
return
8
;
}
else
if
(
fIEVersion
==
9
)
{
return
9
;
}
else
if
(
fIEVersion
==
10
)
{
return
10
;
}
else
{
return
6
;
//IE版本<=7
}
}
else
if
(
isEdge
)
{
return
-
1
;
//edge
}
else
if
(
isIE11
)
{
return
11
;
//IE11
}
else
{
return
-
1
;
//不是ie浏览器
}
}
if
(
IEVersion
()
!=
-
1
)
{
alert
(
"暂时不支持IE浏览器,请更换其他浏览器!"
);
window
.
close
();
}
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