Skip to content

Instantly share code, notes, and snippets.

@padolsey
Created February 22, 2024 04:29
Show Gist options
  • Save padolsey/03e339964deced31953c0626ce866740 to your computer and use it in GitHub Desktop.
Save padolsey/03e339964deced31953c0626ce866740 to your computer and use it in GitHub Desktop.
// Creating a new MutationObserver to watch for changes in the attributes of an image element
new MutationObserver(changes => {
// Iterating through each change detected by the observer
changes.forEach(change => {
// Check if the change is related to the 'src' attribute of the image
if(change.attributeName.includes('src')){
console.log(change.target.src); // Logging the new source of the image
// Attempt to find an existing clone image by its ID
let i = document.querySelector('#img-clone-transparent');
// If the clone does not exist, create it and append it to the canvas container
if (!i) {
i = document.createElement('img');
i.id = 'img-clone-transparent';
const c = document.querySelector('.canvas-container'); // Finding the canvas container
c.appendChild(i); // Appending the clone image to the container
// Setting multiple styles to the clone for positioning and appearance
i.style = `
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
opacity: 0.75;
pointer-events: none;
margin-left: auto;
right: 0;
`;
// Adjusting the opacity of the clone on mouse down for better visibility
c.onmousedown = () => i.style.opacity = '0.5';
// Returning the opacity back to semi-transparent on mouse up
c.onmouseup = () => i.style.opacity = '0.75';
}
// Updating the source of the clone image to the new source of the original image
i.src = change.target.src;
}
});
// Specifying the target for the observer and the type of mutations to observe
}).observe(document.querySelector('img[src*="blob:"]'), {attributes: true});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment