Upload photo with Facebook Graph API and JavaScript: 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 Facebook directly -- without hosting the image on a server.

The problem we're facing is how to convert the base64-encoded data from toDataURL() into the multipart/form-data that Facebook expects. Is this possible on the client side with JavaScript and jQuery.post()? If not, we can resort to saving the image on a server first but prefer bypassing this step if possible and doing everything from the client.

This is for a PhoneGap app.

standup75 · Accepted Answer · 2012-04-18 18:20:14Z

2

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

answered Apr 18, 2012 at 18:20

standup75

4,8246 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Crashalot Over a year ago

Cool, thanks @standup75. Do you know if this is possible with jQuery.post()? Otherwise, writing the AJAX request like you did will work, but we prefer to funnel everything through jQuery.post() if possible.

standup75 Over a year ago

I guess not, the save funciton is building the multipart request "by hand"

pradeek Over a year ago

@standup75 Why not? Wouldn't sending that multipart request body using $.post work by setting the contentType?

standup75 Over a year ago

If you use $.post, jQeury is taking care of posting the variables in the body of the request for you, that conflicts with the way it is done here, cause we're building the body of the request by formatting ourselves an ISO 8859 string

Crashalot Over a year ago

thanks @pradeek and standup75, but it seems like it doesn't work with Facebook unfortunately.

|

hungneox · Accepted Answer · 2012-04-18 18:36:43Z

1

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

answered Apr 18, 2012 at 18:36

hungneox

9,85113 gold badges51 silver badges67 bronze badges

1 Comment

Crashalot Over a year ago

Sorry, something all in JS and jQuery ... no PHP.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related