Generated screenshot is 2x the size of model-viewer's size

[karanganesan]

Description

So lately we I have been using .toDataURL function to generate images based on model viewer. I found that images generated are twice the size of style given to model-viewer

also some odd behaviour on different MacOS versions

Catalina Chrome - it doubles the size
Catalina Safari - it doubles the size

Big Sur Chrome - it doubles the size
Big Sur Safari - it's working fine like generates the exact size as model-viewer's style given (width and height)

so because of the above behaviour it might even be a browser bug, but I am not sure. or I think it's possible to do something from model-viewer's code base itself.

Live Demo

https://export-image-bug.glitch.me/
https://glitch.com/edit/#!/export-image-bug

Version

• model-viewer: v1.2.1

Browser Affected

• Chrome
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

[elalish]

It will generate the pixel size that it is currently rendering, which is affected by both devicePixelRatio and our dynamic render scaling. Macs tend to have DPR=2, so that's one thing to be aware of. If you're trying to grab a screenshot during active rendering, then you may want to set minimumRenderScale=1 to disable dynamic render scale.

[dmkrtz]

I'm at a point where I have the exact same issue, even with changing the static viewer minimumRenderScale. I am setting the viewer element to e.g. 2048x2048px, the HTML DOM Element also shows that it's 2048x2048, yet when trying to generate a screenshot with .toDataURL or .toBlob, they're atleast 1.5x the size and never the same as the DOM Element. (also not even the same ratio)
With the newest version 3.1.1 though.

Well, it seems the 2023 solution is this:
Put "window.devicePixelRatio = 1;" somewhere in your JavaScript. Checking the original DPR it was in fact 1.5, that's when my brain registered that this was connected with my screenshots being ~1.5x bigger.