github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换 fast-average-color

This commit is contained in:
liuzhihang 2022-11-04 23:26:10 +08:00
parent c916c6eee3
commit f3e06b8fcb
3 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/assets/libs/fast-average-color/index.browser.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

72
templates/assets/zhheo/blogex.js
View File

@ -73,42 +73,58 @@ function coverColor() {
let path = img.src;
if (void 0 !== path) {
const colorThief = new ColorThief();
const fac = new FastAverageColor();
fac.getColorAsync(path)
.then(color => {
console.log('Average color', color);
loadColor(color);
})
.catch(e => {
console.log(e);
defaultColor();
});
// const colorThief = new ColorThief();
// Make sure image is finished loading
if (img.complete) {
loadColor(colorThief.getColor(img));
} else {
img.addEventListener('load', function () {
loadColor(colorThief.getColor(img));
});
}
function loadColor(rgbColor) {
let hexColor = rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2]);
if ("light" === getContrastYIQ(hexColor)) {
hexColor = LightenDarkenColor(colorHex(hexColor), -40);
document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important");
document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important");
document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important");
heo.initThemeColor();
document.getElementById("coverdiv").classList.add("loaded");
}
}
// if (img.complete) {
// loadColor(colorThief.getColor(img));
// } else {
// img.addEventListener('load', function () {
// loadColor(colorThief.getColor(img));
// });
// }
} else {
document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important");
document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important");
document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important");
heo.initThemeColor();
defaultColor();
}
}
function defaultColor() {
document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important");
document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important");
document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important");
heo.initThemeColor();
}
function loadColor(color) {
let hexColor = color.hex;
if ("light" === getContrastYIQ(hexColor)) {
hexColor = LightenDarkenColor(colorHex(hexColor), -40);
document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important");
document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important");
document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important");
heo.initThemeColor();
document.getElementById("coverdiv").classList.add("loaded");
}
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(x => {
const hex = x.toString(16)

4
templates/modules/layouts/layout.html
View File

@ -66,7 +66,9 @@
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
<!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>
<!--<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>-->
<script th:src="@{/assets/libs/fast-average-color/index.browser.min.js}"></script>
</div>
<div>