jquery - Upload photo with Facebook Graph API and JavaScript: convert canvas image to multipartform-data as POST body? - Stack O

admin管理员组

文章数量:1420973

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.

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.

• javascript
• jquery
• facebook
• facebook-graph-api
• cordova

Share Improve this question Follow edited May 23, 2017 at 12:30 CommunityBot 111 silver badge asked Apr 18, 2012 at 18:14 CrashalotCrashalot 34.6k6363 gold badges284284 silver badges461461 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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/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

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

本文标签：