How to scale the size of a screenshot using html2canvas?

Hello.
Is there a way to force a full page (or just a part of it) to keep it always zooming out to a specific scale?

I have found this Creating a Flexible Tumult Hype Document within a DIV with no set 'height' on the forum but I did not figure out how to apply for my needs.

Can somebody share a workaround on this?

Thank you.

@ionutilie the script in the mentioned thread does not do a scale at all ... it's got another purpose: setting a height

////////////////

to topic: you may provide an example ...

1 Like

Thank you, @h_classen!
I understand that the sample was for height only.

//

My project:
I want to create a screenshot that is higher than 2500 pixels.
But as I create an area with over 2500 px, it will be too big on the screen and hard to see the entire picture / size.
So my idea was that if I zoom out the page, I see the full content, but I can save the screenshot at a higher size.

I have created a file with 1024x728 px as a proof of concept, but as I said, I need a size that is bigger than 2500 px.

Image.zip (59.9 KB)

And this is a video with the idea:

Thank you!

Just a thought: It looks like you are using html2canvas; does that have any options to control the canvas/screenshot size? It is basically re-rendering everything into a canvas so I imagine that you should be able to set that independent of the source content.

1 Like

Thank you @jonathan!
The file was created using some samples from the forum. I have visited the html2canvas documentation but I have no knowledge to understand how to use it or if it contains what I need.
This is why I was looking for a workaround using the zoom out of the page.
Thank you.

1 Like

Have you tried using this:


Example Download:
Image-with-Options.hype.zip (74,0 KB)

1 Like

Thank you @MaxZieb.
As I change the value of the scale in your sample there is no change.
Can you give more details on how to implement it?
I have no JavaScript knowledge to implement it by myself but I am able to change and adapt a functional file.
Thank you!

I updated the example. Now, it works.

3 Likes

Amazing! Thank you @MaxZieb! :partying_face:
It is perfect!

I tried to make this project resizable but I lost the feature to get always the same image with different browser width and height.
Image-with-OptionsResizable.hype.zip (74.5 KB)
This is the image with a quite wide browser window:


And this one reducing the the browser to the left as much as possible:

This deserves a more in depths review and probably can be solved with some math. A quick fix is to use a symbol and not scale on over the other. Then you would need to keep them in sync.

Image-with-OptionsResizableSymbol.hype.zip (75,4 KB)

Another option would be to sync the scaling yourself and unscale at the moment of capture.

Image-with-OptionsResizable-unscale.hype.zip (75,3 KB)

Regards

1 Like

Hello @MaxZieb.
Do you think that would be possible to capture the images that are on scene using Hype Data Magic?

gif

Thank you!

Usually, it shouldn't be a problem, but I am not sure how HTML2Canvas fetches the image data to render it to canvas. My guess is that you are running in to a CORS problem because the images are loaded using XMLHttpRequest as a blob in a mixed local/remote/server setup. The most likely solution: It should work fine as long as the entire setup is on one online server domain (dynamic images, Hype etc.).

2 Likes

Thank you @MaxZieb!
Yes, I changed the source of image to local Resources folder and it is functional! :partying_face:
giff

2 Likes