Upload photo with Facebook Graph API and [removed] convert canvas image to multipart/form-data as POST body?

Question

From this SO question on the topic and from our research elsewhere on the web (like this Facebook doc link), it seems possible to upload an image from canvas.toDataURL() to

Answer 1

Uploading a canvas as a picture on the server is possible. I did a test 2 years ago, you can look up the code: http://standupweb.net/canvas/swSaveCanvas.php

That was using mootools, but it is really not needed there, everything in the save function is native JS code.

Integrating that with facebook should not be a big problem

Answer 2

Basically, You need to remove 'data:image/png;base64' from URI scheme (by using canvas.toDataURL("image/png") for example) and decode it to original form of image source.

Here is my code. I need to use dojo.toJson because of a weird bug happen with facebook.

jQuery.post('index.php',{ 
    data : dojo.toJson({
    image_data: img,
    signed_request: signedRequest
 })
},function(d){

});

And this is PHP

$data = json_decode($_POST['data']);        
$message = $data->message;
$uploadImage = $data->image_data;
$uploadImage = str_replace('data:image/png;base64,', '', $uploadImage);
$uploadImage = base64_decode($uploadImage);

$name = uniqid('image_') . '.png';
file_put_contents('public/images/users/' . $name, $uploadImage);

$image = array(
    'message' => $message,
    'src' => '@' . realpath('public/images/users/' . $name),
);
$result = $this->_facebook->uploadPhoto($image);