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.
Share Improve this question edited May 23, 2017 at 12:30 CommunityBot 11 silver badge asked Apr 18, 2012 at 18:14 CrashalotCrashalot 34.6k63 gold badges284 silver badges461 bronze badges2 Answers
Reset to default 2Uploading 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);