Take screenshot with HTML elements

Tagged: screenshort

This topic has 10 replies, 3 voices, and was last updated 1 year, 1 month ago by kdv.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
2023-10-07 at 11:55 am #67392

kitt
Customer

Hi all,

I’m wondering if it’s possible to take a screenshot of the viewport with all the visible HTML elements overlaying it, either via the take screenshot puzzle or some other means?

Many thanks,
Kitt

2023-10-07 at 5:59 pm #67395

kdv
Participant

Hardware methods like Print Screen on PC or Power + Volume down in Android.

Or you can try this way

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2023-10-08 at 10:50 am #67399

kitt
Customer

kdv wrote:

Hardware methods like Print Screen on PC or Power + Volume down in Android.

Or you can try this way

Thanks, kdv. So, for clarity, I’d like it so that when a user clicks on a button a HTML elements pops-up with the user’s input and then saves a png locally to their computer.

I’ve had a look at your second suggestion already – but I can’t figure out how/where to put the right code so that it happens with the button press – given that my code is split between all the standard Verge source files and my own HTML/CSS. I’ve tried linking the generated .js file to my HTML (which does work) and putting the code in the right section, but it doesn’t seem to handle the event listener correctly and gives me an error in the console. My js knowledge is not sufficient enough to know where I’m going wrong – any advice?

2023-10-08 at 4:59 pm #67400

kdv
Participant

kitt wrote:

I’ve had a look at your second suggestion already

Which one? Google suggests several variants. Try html2canvas. It works.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2023-10-08 at 5:41 pm #67401

mashud008
Customer

I think this puzzle structure for taking screenshots will help you.

Attachments:
You must be logged in to view attached files.

2023-10-08 at 6:41 pm #67403

kdv
Participant

mashud008 wrote:

I think this puzzle structure

The condition below won’t be met.

kitt wrote:

with all the visible HTML elements overlaying it

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2023-10-08 at 7:12 pm #67404

kitt
Customer

kdv wrote:

kitt wrote:

I’ve had a look at your second suggestion already

Which one? Google suggests several variants. Try html2canvas

Yes, that’s the one I’ve already tried and can’t figure out how to get it right.

kdv wrote:

kitt wrote:

with all the visible HTML elements overlaying it

This condition won’t be met. You think wrong.

So it’s not possible? I’m confused.

2023-10-08 at 7:15 pm #67405

kitt
Customer

mashud008 wrote:

I think this puzzle structure for taking screenshots will help you.

Thanks, but I have already tried this and it only renders the 3D viewport but none of the HTML elements around it.

2023-10-08 at 7:18 pm #67406

kdv
Participant

kitt wrote:

So it’s not possible? I’m confused.

With puzzles? Impossible. With html2canvas? Possible.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2023-10-08 at 7:57 pm #67408

kitt
Customer

kdv wrote:

kitt wrote:

So it’s not possible? I’m confused.

With puzzles? Impossible. With html2canvas? Possible.

Yes, I agree – but I can’t figure out how to make it work and I’m looking for some advice. Are you able to help at all?

2023-10-08 at 8:08 pm #67409

kdv
Participant

kitt wrote:

but I can’t figure out how to make it work

This page contains several working examples. Look through them carefully.

kitt wrote:

but it doesn’t seem to handle the event listener correctly and gives me an error in the console.

You didn’t even show that error… Should we guess? You didn’t show your code… Should we remind every questioner to provide a little more information than just words?

Working code example embedded in app_name.html

Btw, it won’t take a screenshot of an app embedded in a frame.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
Author

Posts