Upload photo with Facebook Graph API and JavaScript: convert canvas image to multipart/form
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.
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
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);
下一篇: 使用Facebook Graph API和JavaScript上传照片：将canvas图像转换为multipart / form