Fix bugs in image resolution

This commit is contained in:
the1812 2019-04-05 18:52:26 +08:00
parent d46f51eb4e
commit 4ac10ed7fc
5 changed files with 68 additions and 39 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

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

View File

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

View File

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