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

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.

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

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 :)

helow, nice idea, can you share capx files?

Can you share c3p sample. I can get the file to upload to the server but it the image is a blank.

Any idea why? Or the the php code outdated?

Hello

I have the question

I had a PNG image that was saved as a URL

I took it and with the help of ajax I converted it into a long long text

how to return this text for a whole book to the url state or just how to upload it, for example, to canvas?

I just want post the text in multipleer and then remake this in image

Are you can help me please?