krea.js

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