Is there a way to render a scene (or part of a scene) as an image file for sharing?

(Fran Brennan) #1

Hi… I’m hoping to create a simple exercise in interactivity whereby users can build an image by dragging and dropping predefined visual elements.

I’m fine for creating that aspect of things but not the following…

Once the user has finished creating their image I’d like them to be able to click a ‘share’ button which will provide them with the opportunity to export their image to a social platform of their choosing and/or save it to their device.

Any tips, thoughts, or points-in-the-right-direction will be very gratefully received :slight_smile:

(Hans-Gerd Claßen) #2

the example includes a small php that’ll save a png to server …

(Fran Brennan) #3

Fabulous! :+1:

I’d noticed Drawing Canvas in Hype Docks but had failed to spot its inclusion of the php you mention.

A million thanks… that’s perfect by the look of it :grinning: x x

(Fran Brennan) #4

Doh! The hosting platform that the project is destined for doesn’t support php processing.

Sigh. Back to the drawing board (no pun intended).

(Mark Hunte) #5

This is a snippet from code I have taken from one of my projects which deals with drawing the canvas first.
If you can get your drawing done in a canvas then you can use something like this which downloads the canvas as a png file.

var canvas = document.getElementById('canvasSignature');

	function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        u8arr[n] = bstr.charCodeAt(n);
    return new Blob([u8arr], {type:mime});

function saveImage(_canvasObject){
  // do your stuff
var today = new Date();
var m = ('0' + today.getMinutes()).slice(-2);
var s = ('0' + today.getSeconds()).slice(-2)
var h = today.getHours()

    var link = document.createElement("a");
     // var imgData = _canvasObject.toDataURL({    format: 'jpg',
        //multiplier: 4});
        var imgData = _canvasObject.toDataURL('image/png', 1.0);
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
      var objurl = URL.createObjectURL(blob); = 'image_download_' + h   + m + s + '.png'

      link.href = objurl;;

} ;

(Fran Brennan) #6

Thank you for that… it’s hugely appreciated!!!

I’ll take a good look at it all and see if it can be implemented at this end - and If I’m able to get things working as needed I’ll pop a demo file up for others’ reference :slight_smile:

(Fran Brennan) #8

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 :grinning: (70.4 KB)

(Mark Hunte) #9

Thanks for sharing and the detailed explination.

I am sure this will be useful to many. Especially with the html2canvas