mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Fix bugs in image resolution
This commit is contained in:
parent
d46f51eb4e
commit
4ac10ed7fc
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/image-resolution.min.js
vendored
2
min/image-resolution.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,e)=>{const r=/@(\d+)[Ww]_(\d+)[Hh]/;const i=t.imageResolutionScale==="auto"?window.devicePixelRatio:parseInt(t.imageResolutionScale);const o=["#certify-img1","#certify-img2"];const n=[".jpg",".png",".gif",".webp"];function s(t){const e=()=>{if(o.some(e=>t.matches(e))){return}if(!n.some(e=>t.src.endsWith(e))){return}const e=t.src.match(r);if(!e){return}let[,s,c]=e;let u=parseInt(t.getAttribute("data-resolution-width")||"0");if(parseInt(s)>=u&&u!==0){return}if(t.getAttribute("width")===null&&t.getAttribute("height")===null){t.setAttribute("width",s)}s=(i*parseInt(s)).toString();c=(i*parseInt(c)).toString();t.setAttribute("data-resolution-width",s);t.src=t.src.replace(r,`@${s}w_${c}h`)};Observer.observe(t,()=>{e()},{attributeFilter:["src"],attributes:true})}document.querySelectorAll("img").forEach(t=>s(t));Observer.childListSubtree(document.body,t=>{for(const e of t){for(const t of e.addedNodes){if(t.nodeName.toLowerCase()==="img"){s(t)}else if(t instanceof Element){t.querySelectorAll("img").forEach(t=>s(t))}}}});return{export:{imageResolution:s}}}})();
|
||||
(()=>{return(t,e)=>{const r=/@(\d+)[Ww]_(\d+)[Hh]/;const n=t.imageResolutionScale==="auto"?window.devicePixelRatio:parseInt(t.imageResolutionScale);const o=["#certify-img1","#certify-img2"];const i=[".jpg",".png",".gif",".webp"];const s=(t,e)=>{const r=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null,false);let n=r.nextNode();while(n){e(n);n=r.nextNode()}};async function a(t){const e=(e,i)=>{const s=e(t);if(s===null){return}if(o.some(e=>t.matches(e))){return}const a=s.match(r);if(!a){return}let[,u,c]=a;let l=parseInt(t.getAttribute("data-resolution-width")||"0");if(parseInt(u)>=l&&l!==0){return}if(t.getAttribute("width")===null&&t.getAttribute("height")===null){t.setAttribute("width",u)}u=(n*parseInt(u)).toString();c=(n*parseInt(c)).toString();t.setAttribute("data-resolution-width",u);i(t,s.replace(r,`@${u}w_${c}h`))};Observer.observe(t,()=>{e(t=>t.getAttribute("src"),(t,e)=>t.setAttribute("src",e));e(t=>t.style.backgroundImage,(t,e)=>t.style.backgroundImage=e)},{attributeFilter:["src","style"],attributes:true})}s(document.body,t=>a(t));Observer.childListSubtree(document.body,t=>{for(const e of t){for(const t of e.addedNodes){if(t instanceof HTMLElement){a(t);if(t.nodeName.toUpperCase()!=="IMG"){s(t,t=>a(t))}}}}});return{export:{imageResolution:a}}}})();
|
||||
@ -10,15 +10,28 @@ const imageFormats = [
|
||||
".gif",
|
||||
".webp"
|
||||
];
|
||||
export function imageResolution(element) {
|
||||
const replaceSource = () => {
|
||||
const walk = (rootElement, action) => {
|
||||
const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, null, false);
|
||||
let node = walker.nextNode();
|
||||
while (node) {
|
||||
action(node);
|
||||
node = walker.nextNode();
|
||||
}
|
||||
};
|
||||
export async function imageResolution(element) {
|
||||
const replaceSource = (getValue, setValue) => {
|
||||
const value = getValue(element);
|
||||
if (value === null) {
|
||||
return;
|
||||
}
|
||||
if (excludeSelectors.some(it => element.matches(it))) {
|
||||
return;
|
||||
}
|
||||
if (!imageFormats.some(it => element.src.endsWith(it))) {
|
||||
return;
|
||||
}
|
||||
const match = element.src.match(regex);
|
||||
// if (!imageFormats.some(it => value.endsWith(it)))
|
||||
// {
|
||||
// return;
|
||||
// }
|
||||
const match = value.match(regex);
|
||||
if (!match) {
|
||||
return;
|
||||
}
|
||||
@ -33,21 +46,22 @@ export function imageResolution(element) {
|
||||
width = (dpi * parseInt(width)).toString();
|
||||
height = (dpi * parseInt(height)).toString();
|
||||
element.setAttribute("data-resolution-width", width);
|
||||
element.src = element.src.replace(regex, `@${width}w_${height}h`);
|
||||
setValue(element, value.replace(regex, `@${width}w_${height}h`));
|
||||
};
|
||||
Observer.observe(element, () => {
|
||||
replaceSource();
|
||||
}, { attributeFilter: ["src"], attributes: true });
|
||||
replaceSource(e => e.getAttribute("src"), (e, v) => e.setAttribute("src", v));
|
||||
replaceSource(e => e.style.backgroundImage, (e, v) => e.style.backgroundImage = v);
|
||||
}, { attributeFilter: ["src", "style"], attributes: true });
|
||||
}
|
||||
document.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
walk(document.body, it => imageResolution(it));
|
||||
Observer.childListSubtree(document.body, records => {
|
||||
for (const record of records) {
|
||||
for (const node of record.addedNodes) {
|
||||
if (node.nodeName.toLowerCase() === "img") {
|
||||
if (node instanceof HTMLElement) {
|
||||
imageResolution(node);
|
||||
}
|
||||
else if (node instanceof Element) {
|
||||
node.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
if (node.nodeName.toUpperCase() !== "IMG") {
|
||||
walk(node, it => imageResolution(it));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,19 +10,34 @@ const imageFormats = [
|
||||
".gif",
|
||||
".webp"
|
||||
]
|
||||
export function imageResolution(element: HTMLImageElement)
|
||||
const walk = (rootElement: Node, action: (node: HTMLElement) => void) =>
|
||||
{
|
||||
const replaceSource = () =>
|
||||
const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, null, false);
|
||||
let node = walker.nextNode();
|
||||
while (node)
|
||||
{
|
||||
action(node as HTMLElement);
|
||||
node = walker.nextNode();
|
||||
}
|
||||
}
|
||||
export async function imageResolution(element: HTMLElement)
|
||||
{
|
||||
const replaceSource = (getValue: (e: HTMLElement) => string | null, setValue: (e: HTMLElement, v: string) => void) =>
|
||||
{
|
||||
const value = getValue(element);
|
||||
if (value === null)
|
||||
{
|
||||
return;
|
||||
}
|
||||
if (excludeSelectors.some(it => element.matches(it)))
|
||||
{
|
||||
return;
|
||||
}
|
||||
if (!imageFormats.some(it => element.src.endsWith(it)))
|
||||
{
|
||||
return;
|
||||
}
|
||||
const match = element.src.match(regex);
|
||||
// if (!imageFormats.some(it => value.endsWith(it)))
|
||||
// {
|
||||
// return;
|
||||
// }
|
||||
const match = value.match(regex);
|
||||
if (!match)
|
||||
{
|
||||
return;
|
||||
@ -40,28 +55,28 @@ export function imageResolution(element: HTMLImageElement)
|
||||
width = (dpi * parseInt(width)).toString();
|
||||
height = (dpi * parseInt(height)).toString();
|
||||
element.setAttribute("data-resolution-width", width);
|
||||
element.src = element.src.replace(regex, `@${width}w_${height}h`);
|
||||
|
||||
setValue(element, value.replace(regex, `@${width}w_${height}h`));
|
||||
};
|
||||
Observer.observe(element, () =>
|
||||
{
|
||||
replaceSource();
|
||||
}, { attributeFilter: ["src"], attributes: true });
|
||||
replaceSource(e => e.getAttribute("src"), (e, v) => e.setAttribute("src", v));
|
||||
replaceSource(e => e.style.backgroundImage, (e, v) => e.style.backgroundImage = v);
|
||||
}, { attributeFilter: ["src", "style"], attributes: true });
|
||||
}
|
||||
document.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
walk(document.body, it => imageResolution(it));
|
||||
Observer.childListSubtree(document.body, records =>
|
||||
{
|
||||
for (const record of records)
|
||||
{
|
||||
for (const node of record.addedNodes)
|
||||
{
|
||||
if (node.nodeName.toLowerCase() === "img")
|
||||
if (node instanceof HTMLElement)
|
||||
{
|
||||
imageResolution(node as HTMLImageElement);
|
||||
}
|
||||
else if (node instanceof Element)
|
||||
{
|
||||
node.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
imageResolution(node);
|
||||
if (node.nodeName.toUpperCase() !== "IMG")
|
||||
{
|
||||
walk(node, it => imageResolution(it));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user