How do I post an image snapshot to an external API endpoint?

Post reply
0 favourites
  • 12 posts
From the Asset Store
Post Apocalyptic Trailer
$49 USD
We present to you “Post Apocalyptic Trailer” – our newest hard hitting, bass rumbling designed movie trailer collection.
Epic Stock Media's avatar
Epic Stock Media

  • Instead of invoking the downloading of CanvasSnapshot, I'm trying to store the captured snapshot into an object (e.g. binary data) and then posting the data (e.g base64 format) to an external API endpoint.

    Is there a way that I can do this within Construct 3? Appreciate any help!

  • You can do this with AJAX and Binary Data. 

    AJAX Set Response Binary
AJAX Request imageURL
Wait for previous action to complete

    The base64 string will be available in BinaryData.GetBase64 expression.

  • dop2000 Thanks for the suggestion. What do you mean by the 2nd line? Do you mean to perform an AJAX POST request? I tried to perform a POST Binary to URL to my API endpoint, but it doesn't seem to be working.

  • No, use "AJAX Request URL" action and put CanvasSnapshot in URL field.

  • Here's a screenshot of what I have done:

    Am I right to send an AJAX POST request after "AJAX Request URL" to my endpoint?

    I don't quite understand why I have to perform "AJAX Request URL" after "AJAX Set Binary Response". Can't I just obtain the data from BinaryData?

    Also, do you know how I might be able to take a snapshot of a portion of the game screen (specific x and y coordinates) instead of the whole screen?

  • I don't see your screenshot..

    Here's what you need to do: 

    System Snapshot Canvas
Wait for previous action to complete
AJAX Set Response Binary
AJAX Request URL : CanvasSnapshot 
Wait for previous action to complete
AJAX POST BinaryData.GetBase64 to "https://yourServer"

    AJAX Request will feed image data into the BinaryData object. AJAX POST will post this data in Base64 format to your endpoint.

  • Also, do you know how I might be able to take a snapshot of a portion of the game screen (specific x and y coordinates) instead of the whole screen?

    From the documentation:

  • Apologies, not sure why my uploaded image didn't get posted.

    I have managed to post BinaryData.GetBase64 to my desired API endpoint. However, when I try to store it into a .png file, it gives me a blank image and I'm not sure why. Is there something wrong with my System Snapshot Canvas?

    Thanks for sharing the documentation, I will try and see if I'm able to take a subset of the canvas area.

  • You might need to add a header to Base64 data:

    data:image/png;base64,...........

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I don't think that is the issue as the BinaryDate.GetBase64 only passes the actual Base64 string without the headers...

    Here's a screenshot for your reference:

    Did I miss any step?

  • Try to decode the base64 string here:

    codebeautify.org/base64-to-image-converter

    If it works, then the problem is somewhere else. Like I said, maybe the script you are using to save base64 to png requires some additional headers.

  • Thanks for the suggestion. I've finally manage to make it work!

    Issue lied on my PHP API end rather than construct, had to perform the following string replacement in order for the base64 decoding to work.

    $image = $request->image;

    $image = str_replace('data:image/png;base64,', '', $image);

    $image = str_replace(' ', '+', $image);

    Appreciate your help!

Post reply
  • 12 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)