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
47061405f2
commit
d5c95d31ce
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -80,6 +80,7 @@ const settings = {
|
||||
framePlayback: true,
|
||||
useCommentStyle: true,
|
||||
imageResolution: false,
|
||||
imageResolutionScale: "auto",
|
||||
toastInternalError: false,
|
||||
i18n: false,
|
||||
i18nLanguage: "日本語",
|
||||
|
||||
@ -80,6 +80,7 @@ const settings = {
|
||||
framePlayback: true,
|
||||
useCommentStyle: true,
|
||||
imageResolution: false,
|
||||
imageResolutionScale: "auto",
|
||||
toastInternalError: false,
|
||||
i18n: false,
|
||||
i18nLanguage: "日本語",
|
||||
|
||||
@ -55,6 +55,7 @@ export const settings = {
|
||||
framePlayback: true,
|
||||
useCommentStyle: true,
|
||||
imageResolution: false,
|
||||
imageResolutionScale: "auto",
|
||||
toastInternalError: false,
|
||||
i18n: false,
|
||||
i18nLanguage: "日本語",
|
||||
|
||||
2
min/image-resolution.min.js
vendored
2
min/image-resolution.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,e)=>{const r=/(.*?)@(.*)\./;const o=["certify-img1","certify-img2"];const s=8;function i(t){if(o.includes(t.id)){return}let e=0;const i=new Observer(t,()=>{e++;if(e>s){i.stop();return}const o=t.getAttribute("src");const c=o.match(r);if(c&&c[1]){i.stop();t.setAttribute("src",c[1])}});i.options={childList:false,attributes:true,subtree:false};i.start()}document.querySelectorAll("img").forEach(t=>i(t));Observer.childListSubtree("body",t=>{for(const e of t){for(const t of e.addedNodes){if(t.nodeName.toLowerCase()==="img"){i(t)}t.querySelectorAll&&t.querySelectorAll("img").forEach(t=>i(t))}}});return{export:{imageResolution:i}}}})();
|
||||
(()=>{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}}}})();
|
||||
@ -1,54 +1,57 @@
|
||||
const regex = /(.*?)@(.*)\./;
|
||||
const excludeIds = [
|
||||
"certify-img1",
|
||||
"certify-img2",
|
||||
const regex = /@(\d+)[Ww]_(\d+)[Hh]/;
|
||||
const dpi = settings.imageResolutionScale === "auto" ? window.devicePixelRatio : parseInt(settings.imageResolutionScale);
|
||||
const excludeSelectors = [
|
||||
"#certify-img1",
|
||||
"#certify-img2",
|
||||
];
|
||||
const MaxChangedTimes = 8;
|
||||
export function imageResolution(element)
|
||||
{
|
||||
if (excludeIds.includes(element.id))
|
||||
{
|
||||
return;
|
||||
}
|
||||
let changedTimes = 0;
|
||||
const observer = new Observer(element, () =>
|
||||
{
|
||||
changedTimes++;
|
||||
if (changedTimes > MaxChangedTimes)
|
||||
{
|
||||
observer.stop();
|
||||
const imageFormats = [
|
||||
".jpg",
|
||||
".png",
|
||||
".gif",
|
||||
".webp"
|
||||
];
|
||||
export function imageResolution(element) {
|
||||
const replaceSource = () => {
|
||||
if (excludeSelectors.some(it => element.matches(it))) {
|
||||
return;
|
||||
}
|
||||
const src = element.getAttribute("src");
|
||||
const match = src.match(regex);
|
||||
if (match && match[1])
|
||||
{
|
||||
observer.stop();
|
||||
element.setAttribute("src", match[1]);
|
||||
if (!imageFormats.some(it => element.src.endsWith(it))) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
observer.options = {
|
||||
childList: false,
|
||||
attributes: true,
|
||||
subtree: false,
|
||||
const match = element.src.match(regex);
|
||||
if (!match) {
|
||||
return;
|
||||
}
|
||||
let [, width, height] = match;
|
||||
let lastWidth = parseInt(element.getAttribute("data-resolution-width") || "0");
|
||||
if (parseInt(width) >= lastWidth && lastWidth !== 0) {
|
||||
return;
|
||||
}
|
||||
if (element.getAttribute("width") === null && element.getAttribute("height") === null) {
|
||||
element.setAttribute("width", width);
|
||||
}
|
||||
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`);
|
||||
};
|
||||
observer.start();
|
||||
Observer.observe(element, () => {
|
||||
replaceSource();
|
||||
}, { attributeFilter: ["src"], attributes: true });
|
||||
}
|
||||
document.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
Observer.childListSubtree("body", mutations =>
|
||||
{
|
||||
for (const mutation of mutations)
|
||||
{
|
||||
for (const node of mutation.addedNodes)
|
||||
{
|
||||
if (node.nodeName.toLowerCase() === "img")
|
||||
{
|
||||
Observer.childListSubtree(document.body, records => {
|
||||
for (const record of records) {
|
||||
for (const node of record.addedNodes) {
|
||||
if (node.nodeName.toLowerCase() === "img") {
|
||||
imageResolution(node);
|
||||
}
|
||||
node.querySelectorAll && node.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
else if (node instanceof Element) {
|
||||
node.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
export default {
|
||||
export: { imageResolution }
|
||||
};
|
||||
};
|
||||
|
||||
71
utils/image-resolution.ts
Normal file
71
utils/image-resolution.ts
Normal file
@ -0,0 +1,71 @@
|
||||
const regex = /@(\d+)[Ww]_(\d+)[Hh]/;
|
||||
const dpi = settings.imageResolutionScale === "auto" ? window.devicePixelRatio : parseInt(settings.imageResolutionScale);
|
||||
const excludeSelectors = [
|
||||
"#certify-img1",
|
||||
"#certify-img2",
|
||||
];
|
||||
const imageFormats = [
|
||||
".jpg",
|
||||
".png",
|
||||
".gif",
|
||||
".webp"
|
||||
]
|
||||
export function imageResolution(element: HTMLImageElement)
|
||||
{
|
||||
const replaceSource = () =>
|
||||
{
|
||||
if (excludeSelectors.some(it => element.matches(it)))
|
||||
{
|
||||
return;
|
||||
}
|
||||
if (!imageFormats.some(it => element.src.endsWith(it)))
|
||||
{
|
||||
return;
|
||||
}
|
||||
const match = element.src.match(regex);
|
||||
if (!match)
|
||||
{
|
||||
return;
|
||||
}
|
||||
let [, width, height] = match;
|
||||
let lastWidth = parseInt(element.getAttribute("data-resolution-width") || "0");
|
||||
if (parseInt(width) >= lastWidth && lastWidth !== 0)
|
||||
{
|
||||
return;
|
||||
}
|
||||
if (element.getAttribute("width") === null && element.getAttribute("height") === null)
|
||||
{
|
||||
element.setAttribute("width", width);
|
||||
}
|
||||
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`);
|
||||
|
||||
};
|
||||
Observer.observe(element, () =>
|
||||
{
|
||||
replaceSource();
|
||||
}, { attributeFilter: ["src"], attributes: true });
|
||||
}
|
||||
document.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
Observer.childListSubtree(document.body, records =>
|
||||
{
|
||||
for (const record of records)
|
||||
{
|
||||
for (const node of record.addedNodes)
|
||||
{
|
||||
if (node.nodeName.toLowerCase() === "img")
|
||||
{
|
||||
imageResolution(node as HTMLImageElement);
|
||||
}
|
||||
else if (node instanceof Element)
|
||||
{
|
||||
node.querySelectorAll("img").forEach(it => imageResolution(it));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
export default {
|
||||
export: { imageResolution }
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user