Загрузить фотографию с помощью API-интерфейса Facebook Graph и JavaScript: конвертировать изображение холста в multipart/form-data как тело POST?

Из этого SO вопроса по этой теме и из наших исследований в других местах в Интернете (например, этот doc link), можно загрузить изображение с canvas.toDataURL() в Facebook напрямую - без размещения изображения на сервере.

Проблема, с которой мы сталкиваемся, заключается в том, как преобразовать данные, основанные на base64, из toDataURL() в multipart/form-data, которые ожидает Facebook. Возможно ли это на стороне клиента с JavaScript и jQuery.post()? Если нет, мы можем прибегнуть к сохранению изображения на сервере в первую очередь, но предпочитаем обходить этот шаг, если это возможно, и делать все с клиента.

Ответы

Ответ 1

Возможность загрузки холста в виде изображения на сервере. Я сделал тест 2 года назад, вы можете найти код: http://standupweb.net/canvas/swSaveCanvas.php

Это использовало mootools, но на самом деле это не нужно, все в функции сохранения - это собственный JS-код.

Интеграция с facebook не должна быть большой проблемой

Ответ 2

В принципе, вам нужно удалить 'data: image/png; base64' из схема URI (используя canvas.toDataURL( "image/png" )) и декодировать его в исходную форму источника изображения.

Вот мой код. Мне нужно использовать dojo.toJson из-за странной ошибки с facebook.

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

});

И это 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);