How do I upload an image from the DrawingCanvas to a php server?

From the Asset Store
The official Scirra Multiplayer Signalling Server for helping peers find and connect to each other
  • I am looking to create an app where you can upload your composited drawings.

    So far my thinking goes as follows:

    1. When you click the "Upload" button, you save the current image on the DrawingCanvas.

    2. Use the Ajax object to upload the DrawingCanvas.SavedImageURL.

    3. Use php to get the contents at that URI.

    Here's what I have in the event sheet:

    Here's my php:

    The files saved on the php server contain zero bytes of data.

    Any thoughts?

  • You can't send the saved image URL. It refers to local data so the remote server will not be able to access it.

    Use AJAX to first load the Drawing Canvas in to a Binary Data object, and then send the Binary Data to your server.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • You can't send the saved image URL. It refers to local data so the remote server will not be able to access it.

    Use AJAX to first load the Drawing Canvas in to a Binary Data object, and then send the Binary Data to your server.

    Ashley Thank you for this! I'm a little dense, but I'm not following what the event structure would be for this. Is there an example online that I have missed?

    EDIT: Under "ajax", I see the following:

    Step 1 - Which one works for loading the Drawing Canvas to the Binary Data object?

    Step 2 - I'm assuming I can use "Post Binary to URL" once the Binary Data object's buffer has been populated.

  • Step 1 is to load the saved image URL in to Binary Data. To do that, use a 'set response binary' action followed by requesting the saved image URL. Once that AJAX request completes, the Binary Data object contains the saved image binary data. Then as you've noted you can use 'Post binary to URL' to send it to a server.

  • Ashley, thanks again for your help on this.

    I'm not sure what I'm doing wrong, but on the server side the php script sees an empty $_POST[] array.

    1. Should this array be populated with a Base64 encoded version of the image?

    2. The "POST" method in the Construct 3 AJAX object doesn't allow you to set a key. Does the AJAX object in Construct 3 set a key automatically? I believe there should be a key->value pair received by the php server. Maybe I need to Base64 encode the image first, then send it via a standard AJAX post?

    --------------------

    Here's my event sheet:

    + DrawingCanvas: On saved image

    -> previewSprite: Load image from DrawingCanvas.SavedImageURL (Resize to image size, cross-origin anonymous)

    -> maskSprite: Set animation frame to 0

    -> DrawingCanvas: Clear canvas rgba(0, 0, 0, 0)

    -> AJAX: Set response binary to BinaryData

    -> AJAX: Request DrawingCanvas.SavedImageURL (tag "Step 1")

    + AJAX: On "Step 1" completed

    -> AJAX: Send BinaryData to URL "../upload.php" (method "POST", tag "Step 2")

    -> Browser: Alert "Posting "&BinaryData.GetText(0,BinaryData.ByteLength)&" to server."

    + AJAX: On "Step 2" completed

    -> Browser: Alert AJAX.LastData

  • The events look OK, but note you post to "../upload.php", which in preview mode will post to "preview.construct.net/upload.php", which does not exist. You probably want to put your full URL in there.

    I can't really help you with the PHP side, but note it will post the binary data as the body of the POST request. It will be raw binary data, it's not URL encoded in any way.

  • Still no luck. I've tried everything I can think of:

    1. Getting the contents of the raw binary in php using $data = file_get_contents('php://input'). This gets me a string of garbage that I can't figure out how to use.

    2. Sending a standard POST with AJAX with "data="&URLEncode(BinaryData.GetBase64) in the Data field. I have then been able to successfully decode bits of the image using php. The result is some of the pixels being the right color, but the overall image seems to be compressed into a narrow strip at the top.

    #2 is the closest I've come, and I'm out of ideas. Is there anyone out there who has successfully uploaded an image to a php server?

  • You can do it like this, it converts the binary to base64, downside is a larger filesize.

    For Snapshots

    For DrawingCanvas Snapshots

    The YOUR_SERVER.com/snapshot.php

  • You can do it like this, it converts the binary to base64, downside is a larger filesize.

    For Snapshots

    For DrawingCanvas Snapshots

    The YOUR_SERVER.com/snapshot.php

    It works! Base64 isn't an issue, and I switched over to image/jpeg to cut down on the file size. The pngs were huge, but .jpg makes things a whole lot faster.

  • You can do it like this, it converts the binary to base64, downside is a larger filesize.

    For Snapshots

    For DrawingCanvas Snapshots

    The YOUR_SERVER.com/snapshot.php

    You, you sir, are a true hero :)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)