Click on the element in the page corresponding to the base image

[Vinbec]

Hello,
I would like to know if it's possible with resemble.js to click on an element in the page that is corresponding to a base image.
Or perhaps getting the coordinates of the center of the element corresponding to the base image... (then I use my framework to click on these coordinates)

Could you tell me if it's possible with existing methods or with a small hack or improvement ?
Thanks

[Ephellon]

I am not a maintainer on this project, just answering the question

To compare two images (that are clicked on to be chosen) →

// Query selector shorthand
let $ = (selector, multiple = false, container = document) => multiple
    ? [...container?.querySelectorAll(selector)]
    : container?.querySelector(selector);

// Click on an image (or container)
// This should be be set to something nullish to erase after comparing images...
let comparator = null;

// Add event listeners to all desired images...
$('img.clickable', true).forEach(img => {
//  ↓   `img` can be replaced by `img.closest(".container")` to travel up the tree (parents/containers)
    img.addEventListener('mousedown', event => {
        let { currentTarget } = event;

        // This sets the first image to be compared
        if(comparator === null)
            return comparator = currentTarget;

        // There are now 2 images to compare...
        resemble(currentTarget)
            .compareTo(comparator)
            
            // Optional features...
            .scaleToSameSize()
            .ignoreColors()
            
            // When resembling is complete...
            .onComplete(data => {
                let {
                    analysisTime,       // number~int
                    misMatchPercentage, // number~float
                    isSameDimensions,   // boolean
                } = data;

                /** Do something with the data...
                 * Blah blah blah
                 */

                // "Erase" the setup
                comparator = null;

                // Now the user can rinse and repeat...
            });
    });
});

[Ephellon]

If you mean finding an image based off of a sample →

// Set your base image somehow...
let base = `<HTMLImageElement>`; 

// Go through all ("registered") images on a page...
for(let img of document.images)
    resemble(base)
        .compareTo(img)

        // Optional features...
        .scaleToSameSize()
        .ignoreColors()
        
        // When resembling is complete...
        .onComplete(data => {
            let {
                analysisTime,       // number~int
                misMatchPercentage, // number~float
                isSameDimensions,   // boolean
            } = data;

            /** Do something with the data...
             * Blah blah blah
             */
        });

[Ephellon]

To get the coordinates, use this →

// Gets the X and Y offset (in pixels)
    // getOffset(element:Element) -> Object={ height:number, width:number, left:number, top:number, right:number, bottom:number }
function getOffset(element) {
    let bounds = element.getBoundingClientRect(),
        { height, width } = bounds;

    return {
        height, width,

        left:   bounds.left + (top.pageXOffset ?? document.documentElement.scrollLeft ?? 0) | 0,
        top:    bounds.top  + (top.pageYOffset ?? document.documentElement.scrollTop  ?? 0) | 0,

        right:  bounds.right  + (top.pageXOffset ?? document.documentElement.scrollLeft ?? 0) | 0,
        bottom: bounds.bottom + (top.pageYOffset ?? document.documentElement.scrollTop  ?? 0) | 0,
    };
}

[James Cryer]

I'm a little unclear of your requirements, but Resemble is purely an image comparion library, all other concerns should be implemented yourself, perhaps with other libraries and frameworks.