We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

square screenshot

Home › Forums › General Questions › square screenshot

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • 2023-12-28 at 12:00 am #69390
    swatchyb
    Customer

    Since screenshots are done based on the users full screen, the results are very non-standard/ irregular aspect ratios of product images in a configurator.

    Is there a Blender/Verge/puzzles way to force a square aspect ratio (ie clipping sides on desktops and top/bottom on mobile portrait)? This is likely possible using headless Chrome on the server, but that is likely above my skill level.

    Advice?

    Thanks!

    2023-12-29 at 6:27 pm #69399
    xeon
    Customer

    In my opinion screen shots are the last resort. If you are in a situation where you have to use screen shot, then make sure content is center screen and zoomed appropriately to maximize the space. You can detect the screen size, the aspect ratio and the calculate if the content is in side a center square given the viewport. If its too big..scale out. If too small zoom in. The screen shot will still be irregular but when you display it in a div or other container that is sized to a square it will fit and be centered nicely.

    If you are doing this commercially I would not recommend screen shots as this typically will violate most companies privacy policy at least in the US.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2023-12-29 at 8:57 pm #69400
    swatchyb
    Customer

    Thanks for the reply @xenon.

    The “screenshot” is just using the inbuilt puzzle feature to capture just the v3d iframe of the client’s product in the configurator. The company/ project is for myself, and behind client (meaning consumer) login, so no privacy issues.

    Triggering off of valueupdated element, verge takes and saves the verge (almost full screen) window as the client changes options, replacing a prior if exists. But as mentioned, the clients verge iframe varies based on available monitor/ mobile screen size, therefore the screenshots vary, which is a little sloppy, and some have huge screens that make huge screenshots. I was hoping there was a trick like having an unseen camera (with a forced square aspect-actively cropping) only for use of the screenshot puzzle.

    Configured product shots are mandatory – so can you think of another strategy to achieve more consistency?

    with thanks again.

    2023-12-29 at 9:10 pm #69401
    xeon
    Customer

    ok…so it sounds like you want an V3D solution that uses the client device vs. a server side solution.

    You need:
    a square (1:1) aspect ratio
    a defined 72 to 96 dpi image
    and a webp, jpg or png file format
    in a sRGB color space

    What is the resolution you need? 1024×1024, 500×500?

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2023-12-29 at 9:27 pm #69402
    kdv
    Participant
    swatchyb wrote:

    I was hoping there was a trick like having an unseen camera

    V3D apps are rendered on an HTML canvas and when you take a screenshot it means you make a snapshot of what the active camera renders to this canvas at that moment. You cannot take screenshots from inactive cameras.

    You may consider using something like Cropper.js which is able to crop images taken from canvases.

    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-12-29 at 9:29 pm #69403
    swatchyb
    Customer

    thanks for the quick reply!
    I might be wrong, but I’m staying client side because the server side seems way more complicated. For example, a client session/product can mean 8-10 gltfs and dozens of materials/ shaders swapping in and out of the scene.

    So, yes to all that you mention above @1024×1024 (but not sure if a defined dpi is needed).

    2023-12-29 at 9:35 pm #69404
    swatchyb
    Customer

    thanks kdv, I will check into that!

    2023-12-29 at 10:16 pm #69405
    xeon
    Customer

    If you are set on client side….cropper.js may work for you needs as KDV has mentioned.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2023-12-29 at 10:25 pm #69406
    swatchyb
    Customer

    Thanks Xeon,
    Haven’t had a chance to check out cropper.js from KDV, but it could do the trick, at least for the moment. Am I wrong to think server side/headless chrome is much more advanced? Seems it would be especially because it would need to be in sync with the client view/state. I say that because if the client does not purchase, the item appears in a “recently viewed” grid at the bottom of various pages, similar to ready made products.
    Your thoughts are appreciated ;)

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.