Skip to content

Commit

Permalink
🕷️fix: repair covercolor
Browse files Browse the repository at this point in the history 
修复文章主色调获取之后，主题原色无法恢复
  • Loading branch information
Jose wan committed Jan 27, 2024
1 parent 6036805 commit 40e098a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 96 deletions.
37 changes: 17 additions & 20 deletions source/js/covercolor/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const coverColor = () => {

function handleApiColor(path) {
const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
console.log(cacheGroup)
if (cacheGroup.postcolor && cacheGroup.postcolor[path]) {
const color = cacheGroup.postcolor[path].value;
const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
Expand All @@ -18,30 +19,24 @@ function handleApiColor(path) {

function img2color(src) {
const apiUrl = coverColorConfig.api + encodeURIComponent(src);

fetch(apiUrl)
.then(response => response.json())
.then(data => {
const color = data.RGB;
const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
setThemeColors(color, r, g, b);
if (coverColorConfig.time !== 0) {
cacheColor(src, color);
}
const expirationTime = Date.now() + coverColorConfig.time;
const cacheGroup = saveToLocal.get('Solitude') || {};
cacheGroup.postcolor = cacheGroup.postcolor || {};
cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
})
.catch(error => {
console.error('请检查API是否正常！\n' + error);
setThemeColors();
});
}

function cacheColor(src, color) {
const expirationTime = Date.now() + coverColorConfig.time;
const cacheGroup = saveToLocal.get('Solitude') || {};
cacheGroup.postcolor = cacheGroup.postcolor || {};
cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
}

function setThemeColors(value, r = null, g = null, b = null) {
if (value) {
document.documentElement.style.setProperty('--sco-main', value);
Expand All @@ -51,15 +46,17 @@ function setThemeColors(value, r = null, g = null, b = null) {

if (r && g && b) {
var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
var cardContents = document.getElementsByClassName('card-content');
var authorInfo = document.getElementsByClassName('author-info__sayhi');
for (let i = 0; i < cardContents.length; i++) {
cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
}
if (brightness < 125) {
var cardContents = document.getElementsByClassName('card-content');
for (let i = 0; i < cardContents.length; i++) {
cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
}

for (let i = 0; i < authorInfo.length; i++) {
authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
authorInfo[i].style.setProperty('color', 'var(--sco-white)');
var authorInfo = document.getElementsByClassName('author-info__sayhi');
for (let i = 0; i < authorInfo.length; i++) {
authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
authorInfo[i].style.setProperty('color', 'var(--sco-white)');
}
}
}

Expand Down
83 changes: 7 additions & 76 deletions source/js/covercolor/local.js
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,31 @@
const coverColor = () => {
function coverColor() {
const path = document.getElementById("post-cover")?.src;

if (path) {
localColor(path);
}
}

const localColor = (path) => {
function localColor(path) {
const img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
canvas.width = this.width;
canvas.height = this.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const data = ctx.getImageData(0, 0, img.width, img.height).data;
ctx.drawImage(this, 0, 0);
const data = ctx.getImageData(0, 0, this.width, this.height).data;
const {r, g, b} = calculateRGB(data);
let value = rgbToHex(r, g, b);
if (getContrastYIQ(value) === "light") {
value = LightenDarkenColor(value, -50);
}
setThemeColors(value, r, g, b);
};
img.onerror = function() {
console.error('图片加载失败');
};
img.src = path;
}

function calculateRGB(data) {
let r = 0, g = 0, b = 0;
const step = 5;
for (let i = 0; i < data.length; i += 4 * step) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
}
r = Math.floor(r / (data.length / 4 / step));
g = Math.floor(g / (data.length / 4 / step));
b = Math.floor(b / (data.length / 4 / step));
return {r, g, b};
}

function rgbToHex(r, g, b) {
return "#" + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}
Expand Down Expand Up @@ -98,57 +82,4 @@ function colorRgb(str) {
} else {
return sColor;
}
}

function setThemeColors(value, r = null, g = null, b = null) {
const cardContents = document.getElementsByClassName('card-content');
const authorInfo = document.getElementsByClassName('author-info__sayhi');

if (value) {
document.documentElement.style.setProperty('--sco-main', value);
document.documentElement.style.setProperty('--sco-main-op', value + '23');
document.documentElement.style.setProperty('--sco-main-op-deep', value + 'dd');
document.documentElement.style.setProperty('--sco-main-none', value + '00');

if (r && g && b) {
var brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
for (let i = 0; i < cardContents.length; i++) {
cardContents[i].style.setProperty('--sco-card-bg', 'var(--sco-white)');
}

for (let i = 0; i < authorInfo.length; i++) {
authorInfo[i].style.setProperty('background', 'var(--sco-white-op)');
authorInfo[i].style.setProperty('color', 'var(--sco-white)');
}
}

document.getElementById("coverdiv").classList.add("loaded");
initThemeColor();
} else {
document.documentElement.style.setProperty('--sco-main', 'var(--sco-theme)');
document.documentElement.style.setProperty('--sco-main-op', 'var(--sco-theme-op)');
document.documentElement.style.setProperty('--sco-main-op-deep', 'var(--sco-theme-op-deep)');
document.documentElement.style.setProperty('--sco-main-none', 'var(--sco-theme-none)');
initThemeColor();
}
}

function initThemeColor() {
const currentTop = window.scrollY || document.documentElement.scrollTop;
let themeColor;
if (currentTop > 0) {
themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-card-bg');
} else if (PAGE_CONFIG.is_post) {
themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-main');
} else {
themeColor = getComputedStyle(document.documentElement).getPropertyValue('--sco-background');
}
changeThemeColor(themeColor);
}

function changeThemeColor(color) {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
meta.setAttribute('content', color);
}
}

0 comments on commit 40e098a

Please sign in to comment.