Capturing Mouse Click in Relation to an Image

Using Streamlit
1

I’m looking to capture mouse click events on an image where the x y coordinates are in relation to the image and not the user’s window (and ideally eventually draw a dot on the image). Is there currently a way to do this?

Below is my code, which is not printing the mouse clicks. When I try to use cv2.imshow and/or cv2.namedWindow I run into the error “Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘NSWindow drag regions should only be invalidated on the Main Thread!’”.

import streamlit as st
from os import listdir, path
import cv2


def main():
    # Get array of .tiff images from directory
    p = "./frames"
    arr_images = listdir(p)
    # Path to a single test .tiff image
    img_path = path.join(p, arr_images[0])
    img = cv2.imread(img_path, cv2.IMREAD_COLOR)
    st.image(img, caption=None, width=None)

    # Bind function
    # cv2.imshow('img', img)
    # cv2.namedWindow('img')
    # Mouse Click Listener with cv2
    cv2.setMouseCallback('img', click_event)


# Print x y coordinates for left mouse clicks with cv2
def click_event(event, x, y, flags, params):
    if event == cv2.EVENT_LBUTTONDOWN:
        print(x, ' ', y)


if __name__ == "__main__":
    main()
1 Like
2

Hello !
I’m facing the same issue. Did you find a way to use cv2 mouseCallback within streamlit ?

3

Unfortunately I couldn’t figure out how to get cv2 to work, so I ended up using streamlit-drawable-canvas instead.

4

Maybe try this: How to Crop OpenCV Image using Mouse Click and Movement in Python (life2coding.com)

5

Was somebody able to find a way to work around this problem?

6

Feel free to try this new component New tiny component: streamlit-image-coordinates