How to scale the size of a screenshot using html2canvas?

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. (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: (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.


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. (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. (75,4 KB)

Another option would be to sync the scaling yourself and unscale at the moment of capture. (75,3 KB)


1 Like

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


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.).


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