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

获取图片主色

This commit is contained in:
liuzhihang 2022-11-04 00:26:51 +08:00
parent b0c115ba2d
commit da2804456b
7 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/assets/libs/color-thief/color-thief.umd.js Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -63,16 +63,53 @@ function checkOpen() {
// https://blog.zhheo.com/p/c86d8f1f.html
// ?imageAve 使用 七牛云获取图片主色调，阿里云 oss 则是 @imageAve
// TODO 可以切换为使用本地 JS 获取色调
// function coverColor() {
// var _document$getElementB,
// path = null === (_document$getElementB = document.getElementById("post-cover")) || void 0 === _document$getElementB ? void 0 : _document$getElementB.src,
// httpRequest;
// void 0 !== path ? (httpRequest = new XMLHttpRequest, httpRequest.open("GET", path + "?imageAve", !0), httpRequest.send(), httpRequest.onreadystatechange = function () {
// var json, obj, value, value;
// 4 == httpRequest.readyState && 200 == httpRequest.status && (json = httpRequest.responseText, obj = eval("(" + json + ")"), value = obj.RGB, value = "#" + value.slice(2), "light" == getContrastYIQ(value) && (value = LightenDarkenColor(colorHex(value), -40)), document.styleSheets[0].addRule(":root", "--heo-main:" + value + "!important"), document.styleSheets[0].addRule(":root", "--heo-main-op:" + value + "23!important"), document.styleSheets[0].addRule(":root", "--heo-main-none:" + value + "00!important"), heo.initThemeColor(), document.getElementById("coverdiv").classList.add("loaded"))
// }) : (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())
// }
// 效果比较低微，这块应该添加配置项
// 用户选择是否开启主色调背景
// 然后选择是使用图床的 API 获取主色还是选择使用 js 获取
function coverColor() {
let img = document.getElementById("post-cover");
let path = img.src;
if (void 0 !== path) {
const colorThief = new ColorThief();
const img = new Image();
img.addEventListener('load', function () {
let value = colorThief.getColor(img);
value = rgbToHex(value[0], value[1], value[1]);
if ("light" === getContrastYIQ(value)) {
value = LightenDarkenColor(colorHex(value), -40);
document.styleSheets[0].addRule(":root", "--heo-main:" + value + "!important");
document.styleSheets[0].addRule(":root", "--heo-main-op:" + value + "23!important");
document.styleSheets[0].addRule(":root", "--heo-main-none:" + value + "00!important");
heo.initThemeColor();
document.getElementById("coverdiv").classList.add("loaded");
}
});
img.crossOrigin = 'Anonymous';
img.src = path;
} 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();
}
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b].map(x => {
const hex = x.toString(16)
return hex.length === 1 ? '0' + hex : hex
}).join('');
}
function colorHex(e) {
var t = e;
@ -161,6 +198,7 @@ var navFn = {
function RemoveRewardMask() {
$(".reward-main").attr("style", "display: none"), $("#quit-box").attr("style", "display: none")
}
// 移除加载动画
function removeLoading() {
setTimeout(function () {

5
templates/modules/head.html
View File

@ -19,7 +19,7 @@
<link media="print"
onload='this.media="all"'
rel="stylesheet"
href="//at.alicdn.com/t/c/font_3736806_voo36ma11kl.css">
href="//at.alicdn.com/t/c/font_3736806_icaigqag1ho.css">
<!-- 右下角通知 -->
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css"
@ -117,9 +117,6 @@
</script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<!-- todo 不知道是否有用 https://remixicon.com/ -->
<link href="https://cdn2.tianli0.top/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!-- 动态加载条 -->
<script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"

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

@ -67,8 +67,12 @@
</div>
<div>
<!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script th:inline="javascript">
//coverColor();
// coverColor();
if ([[${theme.config.other.loading_box} and not ${#strings.isEmpty(theme.config.other.loading_box_img)}]]) {
// 移除加载动画

4
templates/modules/widgets/aside/profile.html
View File

@ -30,11 +30,11 @@
<div class="card-info-social-icons is-center">
<a class="social-icon" href="#" rel="external nofollow" target="_blank"
title="Github">
<i class="ri-github-line"></i>
<i class="iconfont icon-github-line"></i>
</a>
<a class="social-icon" href="#" rel="external nofollow" target="_blank"
title="Mail">
<i class="ri-mail-line"></i>
<i class="iconfont icon-mail-line"></i>
</a>
</div>
</div>

1
templates/modules/widgets/nav-menu.html
View File

@ -11,7 +11,6 @@
<!-- javascript:void(0);" -->
<a class="site-page" rel="external nofollow" th:href="@{${menuItem.status.href}}">
<span th:text="${menuItem.status.displayName}"></span>
<i class="iconfont icon-chevron-down"></i>
</a>
<!-- 有子菜单则显示子菜单 -->

3
templates/post.html
View File

@ -7,8 +7,7 @@
<header class="post-bg" id="page-header" th:style="'background-image:url(' + (${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}) + ')'">
<nav th:replace="modules/nav :: nav"></nav>
<div class="coverdiv" id="coverdiv">
<img alt="cover" id="post-cover" loading="lazy"
th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
<img id="post-cover" th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.post_random_img : post.spec.cover}">
</div>
<div id="post-info">