Is it possible to resample an image? (File chooser plugin)

Get help using Construct 2

Post » Tue Jul 01, 2014 5:11 am

I'm excited to see the new file chooser plugin in r174 as it could be used for something I've wanted to do for a while, even though it doesn't appear to work on mobile at the moment (I may be wrong but you don't currently seem to be able to tap the file chooser button on Android or iPhone).

What I would really like to be able to do is build a mobile game where the user can take a picture of themselves and have their face on the in game player, similar to JibJab's various dancing cards but in a game rather than a video:
http://www.jibjab.com/ecards/dances

The problem is that most phone cameras take pictures that are somewhere between 2 and 12 mega-pixels which would be far too big, especially when it would be being used at a tiny fraction of it's original size in game.

From the research I previously did while contemplating an attempt to write a plugin to do this, I thought that the resizing may be possible by loading the image into a canvas of the desired size and then generating a data URI to load into a sprite. This may already be possible in C2, but I haven't been able to find a way, the User Media SnapshotURL looked promising but only appears to work on webcams.

In an ideal world I would like the user to be able take a picture and then have them line up the picture with an oval shape overlay using pinch to zoom, rotate etc. and then put the image in a clipped circle before generating the URI so you end up with a head shaped sprite that could be pinned to the rest of the in game character's sprites in game.

I pretty sure this is all possible in the mobile browser, a simlar thing was done on this promotion for Coke, although it ended by loading the image to a server ready to be shared rather than loading it into another canvas:
http://cdn.mobileembrace.com/uploads/mobileembrace.com/coke/summer/

That example also used a PNG overlay rather that a clipped image, but I know that it is possible to put an image in a circle in a canvas:
http://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image

Anyway if anyone has any insights into how this may be possible, I would be very interested to hear them, otherwise I guess this is more of a feature request for something to be added to a future version of C2!
B
30
S
7
Posts: 23
Reputation: 1,871

Post » Thu Sep 10, 2015 6:51 am

I'm looking for a same sort of solution!

When I'm loading an image from URI (camera) onto a small sprite, the current "resize" option in C2 only seems to change the dimensions but keeps the original resolution.
So when I transfer the "resized" image back to the web server, it's still an big image while I only need a resized version.
B
8
S
2
Posts: 24
Reputation: 694


Return to How do I....?

Who is online

Users browsing this forum: StillSarah and 22 guests