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
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');
saveImage(canvas)
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(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);
link.download = 'image_download_' + h + m + s + '.png'
link.href = objurl;
link.click();
} ;
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
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
Firstly let me say well done, this is amazing. Any update on that sharing feature? I love this concept and would like to see how it will work with Social Media.
x x
