How to Enable a Screenshot Mouse Point and Automatically Send It to an Input?

Need help
1

Hey Bubble Forum

I’m looking for a way to implement the following functionality in my Bubble app:

  1. When the user clicks a button, they can take a screenshot of a specific area of the screen.
  2. The mouse pointer should be visible in the screenshot at the exact point where the user clicked.
  3. Once the screenshot is taken, it should automatically be sent to and displayed in an input (e.g., an image uploader or similar field).

What would be the best approach to achieve this without plugins, I want to build that myself. JavaScript will do it? Server script? Any libraries that integrate well with Bubble for this purpose?

Feel free to reply or dm me

2

Hey @ianklein1710,

Have you tried asking ChatGPT? After watching vids a part of @Kayami’s plugin course, I learned that’s a pretty good first step.

But anyway, it seems like you can use html2canvas NPM library.

1 Like
3

Hey @johnny , yes I’m chatting with gpt, however it’s very specific. I will check the links, thank you

Any further tips on how to implement? I promise if I get it working I’ll record a youtube video teaching hehe

4

Are you trying to capture a specific element on the page? Or more like the CMD + SHIFT + 4 screenshot behavior on Mac?

5

Like windows + shift + S behavior, I suppose the same you mentioned on Mac