Fix bugs in image resolution

This commit is contained in:
the1812 2019-04-05 18:23:34 +08:00
parent 47061405f2
commit d5c95d31ce
8 changed files with 126 additions and 47 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -80,6 +80,7 @@ const settings = {
framePlayback: true,
useCommentStyle: true,
imageResolution: false,
imageResolutionScale: "auto",
toastInternalError: false,
i18n: false,
i18nLanguage: "日本語",

View File

@ -80,6 +80,7 @@ const settings = {
framePlayback: true,
useCommentStyle: true,
imageResolution: false,
imageResolutionScale: "auto",
toastInternalError: false,
i18n: false,
i18nLanguage: "日本語",

View File

@ -55,6 +55,7 @@ export const settings = {
framePlayback: true,
useCommentStyle: true,
imageResolution: false,
imageResolutionScale: "auto",
toastInternalError: false,
i18n: false,
i18nLanguage: "日本語",

View File

@ -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}}}})();

View File

@ -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
View 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 }
};