Actualiser custom.js
This commit is contained in:
parent
98344a5d31
commit
cca1aa8659
2 changed files with 80 additions and 52 deletions
80
custom.js
Normal file
80
custom.js
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
/* ocamlhljs(); */
|
||||||
|
setTimeout(() => checker(3), 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
const checker = (count) => {
|
||||||
|
if (count == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (document.getElementsByTagName("img").length === 0) {
|
||||||
|
setTimeout(() => checker(count - 1), 500);
|
||||||
|
} else {
|
||||||
|
svgObsidianFix();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*! `ocaml` grammar compiled for Highlight.js 11.8.0 */
|
||||||
|
const ocamlhljs=()=>{var e=(()=>{"use strict";return e=>({name:"OCaml",aliases:["ml"],
|
||||||
|
keywords:{$pattern:"[a-z_]\\w*!?",
|
||||||
|
keyword:"and as assert asr begin class constraint do done downto else end exception external for fun function functor if in include inherit! inherit initializer land lazy let lor lsl lsr lxor match method!|10 method mod module mutable new object of open! open or private rec sig struct then to try type val! val virtual when while with parser value",
|
||||||
|
built_in:"array bool bytes char exn|5 float int int32 int64 list lazy_t|5 nativeint|5 string unit in_channel out_channel ref",
|
||||||
|
literal:"true false"},illegal:/\/\/|>>/,contains:[{className:"literal",
|
||||||
|
begin:"\\[(\\|\\|)?\\]|\\(\\)",relevance:0},e.COMMENT("\\(\\*","\\*\\)",{
|
||||||
|
contains:["self"]}),{className:"symbol",begin:"'[A-Za-z_](?!')[\\w']*"},{
|
||||||
|
className:"type",begin:"`[A-Z][\\w']*"},{className:"type",
|
||||||
|
begin:"\\b[A-Z][\\w']*",relevance:0},{begin:"[a-z_]\\w*'[\\w']*",relevance:0
|
||||||
|
},e.inherit(e.APOS_STRING_MODE,{className:"string",relevance:0
|
||||||
|
}),e.inherit(e.QUOTE_STRING_MODE,{illegal:null}),{className:"number",
|
||||||
|
begin:"\\b(0[xX][a-fA-F0-9_]+[Lln]?|0[oO][0-7_]+[Lln]?|0[bB][01_]+[Lln]?|[0-9][0-9_]*([Lln]|(\\.[0-9_]*)?([eE][-+]?[0-9_]+)?)?)",
|
||||||
|
relevance:0},{begin:/->/}]})})();hljs.registerLanguage("ocaml",e)};
|
||||||
|
|
||||||
|
const svgObsidianFix = () => {
|
||||||
|
for (const item of document.getElementsByTagName("img")) {
|
||||||
|
if (!item.src.startsWith("data:image/svg+xml;base64,")) {
|
||||||
|
// Exclude image who aren't SVG and base64 encoded
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Convert to grayscale */
|
||||||
|
const colorToGrayscale = (color) => {
|
||||||
|
return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Extract color using canvas2d */
|
||||||
|
const extractColors = (image) => {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = image.width;
|
||||||
|
canvas.height = image.height;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
|
const pixelData = imageData.data;
|
||||||
|
|
||||||
|
const colors = [];
|
||||||
|
for (let i = 0; i < pixelData.length; i += 4) {
|
||||||
|
if (pixelData[i + 3] > 0) {
|
||||||
|
colors.push({
|
||||||
|
r: pixelData[i],
|
||||||
|
g: pixelData[i + 1],
|
||||||
|
b: pixelData[i + 2],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return colors;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Extract colors
|
||||||
|
const colors = extractColors(item);
|
||||||
|
|
||||||
|
// Calculate the average grayscale value
|
||||||
|
const grayscaleValues = colors.map(colorToGrayscale);
|
||||||
|
const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
|
||||||
|
const averageGrayscale = totalGrayscale / grayscaleValues.length;
|
||||||
|
|
||||||
|
if (averageGrayscale < 128) {
|
||||||
|
item.style = "filter: invert(1);";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -1,52 +0,0 @@
|
||||||
window.addEventListener("load", () => main());
|
|
||||||
|
|
||||||
const main = () => {
|
|
||||||
for (const item of document.getElementsByTagName("img")) {
|
|
||||||
if (!item.src.startsWith("data:image/svg+xml;base64,")) {
|
|
||||||
// Exclude image who aren't SVG and base64 encoded
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Convert to grayscale */
|
|
||||||
const colorToGrayscale = (color) => {
|
|
||||||
return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Extract color using canvas2d */
|
|
||||||
const extractColors = (image) => {
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
canvas.width = image.width;
|
|
||||||
canvas.height = image.height;
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.drawImage(image, 0, 0);
|
|
||||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
||||||
const pixelData = imageData.data;
|
|
||||||
|
|
||||||
const colors = [];
|
|
||||||
for (let i = 0; i < pixelData.length; i += 4) {
|
|
||||||
if (pixelData[i + 3] > 0) {
|
|
||||||
colors.push({
|
|
||||||
r: pixelData[i],
|
|
||||||
g: pixelData[i + 1],
|
|
||||||
b: pixelData[i + 2],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return colors;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Extract colors
|
|
||||||
const colors = extractColors(item);
|
|
||||||
|
|
||||||
// Calculate the average grayscale value
|
|
||||||
const grayscaleValues = colors.map(colorToGrayscale);
|
|
||||||
const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
|
|
||||||
const averageGrayscale = totalGrayscale / grayscaleValues.length;
|
|
||||||
|
|
||||||
console.log(averageGrayscale);
|
|
||||||
if (averageGrayscale < 128) {
|
|
||||||
item.style = "filter: invert(1);";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
Loading…
Reference in a new issue