tig
this is tig’s page
script.js//https://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically
const gifURLs = ["https://u.cubeupload.com/suzuneu/BGqmMP.gif","/api/pages/discordjs-japan/suzuneu/icon"];
const query = "*"+gifURLs.map(gifURL => `[src="${gifURL}"]`).join(",");
const observer = new MutationObserver(records => {
records.forEach(({type,target,addedNodes})=>{
switch(type){
case "attributes":
if(gifURLs.includes(target.src)){
freeze_gif(target);
}
break;
case "childList":
[...addedNodes].flatMap(element =>{
if(gifURLs.includes(element.src)){
return [element];
}
const r = [...element.querySelectorAll(query)];
return r;
}).forEach(element=>{
freeze_gif(element);
});
break;
}
});
})
observer.observe(document.body, {
attributes: true,
attributeFilter: ['src'],
childList: true,
subtree: true
});
console.error("start observe");
document.querySelectorAll(query).forEach(element=>{
freeze_gif(element);
});
window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll(query).forEach(element=>{
freeze_gif(element);
});
});
function freeze(i){
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(err) {
i.parentNode.replaceChild(c, i);
}
console.error("freezed");
}
function freeze_gif(i) {
console.log(i);
if(i.complete){
freeze(i);
}else{
i.addEventListener("load",()=>{
freeze(i)
});
}
}