Okey dokey… I got a bit waylaid with other stuff hence the delay in slinging this up but attached here, at last, is a super-simple working Hype example.
It utilises html2canvas in conjunction with a modified version of @MarkHunte’s snippet (huge thanks, again, for that!).
To ensure that the captured image doesn’t include peripheral visual elements from the stage, such as buttons and unused drag and drop items, I created a group called ‘DragNDrop’ and nested it within another group called ‘Image Area’.
The ‘Image Area’ group bounding box has been sized to fit only the area that I want to capture (yellow arrows) and it has ‘Content Overflow’ set to ‘hidden’. It’s been assigned the unique ID of ‘capture’, which is referenced in the ‘saveImage’ script.
Just by way of a bit of extra ref, I’ve successfully tested the example using Chrome on Android, Chrome on Mac desktop and Safari on Mac desktop with iPhone and iPad set as user agents.
What I’d ultimately like to be able to do is configure things so that there’s an option to share a captured image directly to Facebook and/or Twitter etc. However… this is a start, at least
DragNDropPlusImageCapture.zip (70.4 KB)