Facebook Graph API - télécharger une photo à l'aide de JavaScript

EDIT: cette réponse est (maintenant) sans grande importance. Si votre image est sur le web, il suffit de spécifier le url param selon les API (et voir des exemples dans d'autres réponses). Si vous souhaitez POSTER le contenu de l'image à facebook directement, vous pouvez lire cette réponse à acquérir la compréhension. Voir aussi HTML5 Canvas.toDataUrl().

L'API dit: "Pour publier une photo, envoi d'une requête POST avec la photo en pièce jointe comme multipart/form-data."

FB s'attend à ce que les octets de l'image à être transférés sont dans le corps de la requête HTTP, mais ils ne sont pas là. Ou de le regarder d'une autre manière - là où, dans le FB.api() appel sont vous fournir le contenu réel de l'image elle-même?

La FB.(api) API est mal documentée, et ne fournit pas un exemple de un HTTP POST qui comprend un corps. On peut inférer de l'absence d'un tel exemple, qu'elle ne prend pas en charge cette.

C'est probablement OK - FB.(api) est à l'aide de quelque chose qui s'appelle XmlHttpRequest sous les couvertures qui ne le soutien, y compris un corps ... rechercher dans vos favoris référence JavaScript.

Cependant, vous aurez encore 2 sous-problèmes à résoudre:

1. comment préparer l'image en octets (et le reste de la demande) comme multipart/form-data; et
2. obtenir les octets de l'image elle-même

(d'ailleurs, la nécessité de coder le corps du message est probablement ce que le PHP setFileUploadSupport(true) la méthode est - à dire la facebook objet d'encoder le corps du message comme multipart/form-data avant de l'envoyer)

Mais c'est un peu meessier que

Malheureusement, le sous-problème '2' peut vous mordre - il n'existe aucun moyen (la dernière fois que j'ai regardé) pour extraire les octets d'une image à partir du navigateur de l'Image de l'objet.

Si l'image téléchargée est accessible via une URL, vous pouvez récupérer les octets avec XmlHttpRequest. Pas trop mauvais.

Si l'image provient du bureau de l'utilisateur, de votre probable recours est de proposer à l'utilisateur un:

 <form enctype="multipart/form-data">
     <input type="filename" name="myfile.jpg" />
     <input type="hidden" name="source" value="@myfile.jpg"/>
     <input type="hidden" name="message" value="My Message"/>
     <input type="hidden" name="access_token" value="..."/> 
 </form> 

(notez que source références le nom donné au fichier de téléchargement de widget)

... et l'espoir que FB prévu la réception de données de cette manière (essayez avec un statique HTML formulaire d'abord, avant de coder, il dynamiquement en JS). On peut en déduire qu'en fait il n', car ils n'offrent pas d'autre moyen de le faire.

j'ai utilisé @Владимир Дворник code avec quelques modifications, j'ai eu le même problème et avec ce code ça a très bien fonctionné:

        var imgURL = //your external photo url
        FB.api('/photos', 'post', {
            message: 'photo description',
            access_token: your accesstoken 
            url: imgURL
        }, function (response) {

            if (!response || response.error) {
                alert('Error occured:' + response);
            } else {
                alert('Post ID: ' + response.id);
            }

        });

Seulement @Thiago réponse est la réponse à la question de téléchargement de données via javascript. J'ai trouvé que le Facebook API JS ne couvre pas cette situation.

J'ai aussi brew & testé mon personl solution.

Principales étapes

1. D'obtenir les données binaires de l'image (j'ai utilisé une toile, mais en utilisant une zone de saisie est possible aussi)
2. Forme d'un multipart demande avec toutes les données du graphique à l'appel de l'API
3. Inclure les données binaires dans la demande
4. Encoder le tout dans un tableau binaire et de l'envoyer via XHR

Code

Utilitaires de Conversion de

var conversions = {
  stringToBinaryArray: function(string) {
    return Array.prototype.map.call(string, function(c) {
      return c.charCodeAt(0) & 0xff;
    });
  },
  base64ToString: function(b64String) {
    return atob(b64String);
  }
};

Image affichage extrait de

var DEFAULT_CALL_OPTS = {
url: 'https://graph.facebook.com/me/photos',
type: 'POST',
cache: false,
success: function(response) {
console.log(response);
},
error: function() {
console.error(arguments);
},
//we compose the data manually, thus
processData: false,
/**
*  Override the default send method to send the data in binary form
*/
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.send = function(string) {
var bytes = conversions.stringToBinaryArray(string);
XMLHttpRequest.prototype.send.call(this, new Uint8Array(bytes).buffer);
};
return xhr;
}
};
/**
* It composes the multipart POST data, according to HTTP standards
*/
var composeMultipartData = function(fields, boundary) {
var data = '';
$.each(fields, function(key, value) {
data += '--' + boundary + '\r\n';
if (value.dataString) { //file upload
data += 'Content-Disposition: form-data; name=\'' + key + '\'; ' +
'filename=\'' + value.name + '\'\r\n';
data += 'Content-Type: ' + value.type + '\r\n\r\n';
data += value.dataString + '\r\n';
} else {
data += 'Content-Disposition: form-data; name=\'' + key + '\';' +
'\r\n\r\n';
data += value + '\r\n';
}
});
data += '--' + boundary + '--';
return data;
};
/**
* It sets the multipart form data & contentType
*/
var setupData = function(callObj, opts) {
//custom separator for the data
var boundary = 'Awesome field separator ' + Math.random();
//set the data
callObj.data = composeMultipartData(opts.fb, boundary);
//.. and content type
callObj.contentType = 'multipart/form-data; boundary=' + boundary;
};
//the "public" method to be used
var postImage = function(opts) {
//create the callObject by combining the defaults with the received ones
var callObj = $.extend({}, DEFAULT_CALL_OPTS, opts.call);
//append the access token to the url
callObj.url += '?access_token=' + opts.fb.accessToken;
//set the data to be sent in the post (callObj.data = *Magic*)
setupData(callObj, opts);
//POST the whole thing to the defined FB url
$.ajax(callObj);
};

Utilisation

postImage({
fb: { //data to be sent to FB
caption: caption,
/* place any other API params you wish to send. Ex: place /tags etc.*/
accessToken: 'ACCESS_TOKEN',
file: {
name: 'your-file-name.jpg',
type: 'image/jpeg', //or png
dataString: image //the string containing the binary data
}
},
call: { //options of the $.ajax call
url: 'https://graph.facebook.com/me/photos', //or replace *me* with albumid
success: successCallbackFunction,
error: errorCallbackFunction
}
});

Supplémentaire

L'extraction de la chaîne binaire de représentation d'une toile d'image

var getImageToBeSentToFacebook = function() {
//get the reference to the canvas
var canvas = $('.some-canvas')[0];
//extract its contents as a jpeg image
var data = canvas.toDataURL('image/jpeg');
//strip the base64 "header"
data = data.replace(/^data:image\/(png|jpe?g);base64,/, '');
//convert the base64 string to string containing the binary data
return conversions.base64ToString(data);
}

D'informations sur la façon de charger la binaryString à partir d'un input[type=file]

HTML5 Fichier API de lecture de texte et binaire

Notes:

1. Il y a bien sûr d'autres approches ainsi
   • À l'aide d'un formulaire HTML dans un iframe - vous ne pouvez pas obtenir une réponse de l'appel
   • À l'aide d'un FormData & File approche, mais, malheureusement, dans ce cas, il y a beaucoup de incompatilities qui rend le processus plus difficile à utiliser, et vous vous retrouvez conduit de sport autour de la incohérences - donc mon choix a été manuel de rassemblement des données depuis HTTP normes changent rarement 🙂
2. La solution ne nécessite aucun fonctionnalités HTML5.
3. L'exemple ci-dessus utilise jQuery.ajax, jQuery.étendre, jQuery.chaque

Pour télécharger un fichier à partir de l'ordinateur local avec Javascript essayer HelloJS

<form onsubmit="upload();">
<input type="file" name="file"/>
<button type="submit">Submit</button>
</form>
<script>
function upload(){
hello.api("facebook:/me/photos", 'post', document.getElementById('form'), function(r){
alert(r&&!r.error?'Success':'Failed'); 
});
}
</script>

Il y a un téléchargement de la démo à http://adodson.com/hello.js/demos/upload.html

Cela fonctionne encore. Je l'utilise comme ci-dessous:

var formdata= new FormData();
if (postAs === 'page'){
postTo = pageId; //post to page using pageID
}
formdata.append("access_token", accessToken); //append page access token if to post as page, uAuth|paAuth
formdata.append("message", photoDescription);
formdata.append("url", 'http://images/image.png');
try {
$.ajax({
url: 'https://graph.facebook.com/'+ postTo +'/photos',
type: "POST",
data: formdata,
processData: false,
contentType: false,
cache: false,
error: function (shr, status, data) {
console.log("error " + data + " Status " + shr.status);
},
complete: function () {
console.log("Successfully uploaded photo to Facebook");
}
});
} catch (e) {
console.log(e);
}

Que je pose la question mais si vous avez la moindre idée de si c'est conseillé ou a un gros risque de sécurité par rapport à l'utilisation de PHP api de Facebook.

Me semble que j'ai un problème similaire, mais les solutions ci-dessus ne fonctionne pas.

J'ai été en utilisant la solution proposée par Arrabi (il suffit d'utiliser la propriété url uniquement) pour afficher des images sans aucun problème. Mes images sont autour de 2 à 3 MO chacun.

Lorsque j'ai migré mon application sur un autre serveur (changement de l'url absolue de mes images dans le post) la méthode gardé de me donner 324 erreurs pour les images ci-dessus autour de 100k taille.

Je pensais que c'était dû à une certaine configuration d'Apache sur ma fin, mais quand j'ai changé de apache pour lighttpd le problème était toujours là.

Les connexions en provenance de Facebook en fait dans mon (apache) journal:

69.171.234.7 - - [08/Juin/2012:11:35:54 +0200] "GET /images/cartes/1337701633_518192458.png HTTP/1.1" 200 2676608 "-" "facebookplatform/1.0 (+http://developers.facebook.com)"

69.171.228.246 - - [08/Juin/2012:11:42:59 +0200] "GET /images/test5.jpg HTTP/1.1" 200 457402 "-" "facebookplatform/1.0 (+http://developers.facebook.com)"

69.171.228.246 - - [08/Juin/2012:11:43:17 +0200] "GET /images/test4.jpg HTTP/1.1" 200 312069 "-" "facebookplatform/1.0 (+http://developers.facebook.com)"

69.171.228.249 - - [08/Juin/2012:11:43:49 +0200] "GET /images/test2.png HTTP/1.1" 200 99538 "-" "facebookplatform/1.0 (+http://developers.facebook.com)"

69.171.228.244 - - [08/Juin/2012:11:42:31 +0200] "GET /images/test6.png HTTP/1.1" 200 727722 "-" "facebookplatform/1.0 (+http://developers.facebook.com)"

Seulement test2.png réussi.

Au cas où quelqu'un cherche encore comment télécharger directement à partir d'une toile à Facebook des photos, cela fonctionne pour moi:

function postImageToFacebook(token, imageData, message, successCallback, errorCallback) {
var fd = new FormData();
fd.append("access_token", token);
fd.append("source", imageData);
fd.append("caption", message);
$.ajax({
url: "https://graph.facebook.com/me/photos?access_token=" + token,
type: "POST",
data: fd,
processData: false,
contentType: false,
cache: false,
success: function (data) {
successCallback(data);
},
error: function (shr, status, data) {
errorCallback(data);
},
complete: function (data) {
console.log('Completed');
}
});
}
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: 'image/jpeg'});
}

Utiliser

//*IMPORTANT*
var FBLoginScope = 'publish_actions'; //or sth like 'user_photos,publish_actions' if you also use other scopes.
var caption = "Hello Facebook!";
var successCallback = ...;
var errorCallback = ...;
var data = $('#your_canvas_id')[0].toDataURL("image/jpeg");
try {
imageData = dataURItoBlob(data);
} catch (e) {
console.log(e);
}
FB.getLoginStatus(function (response) {
if (response.status === "connected") {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
} else if (response.status === "not_authorized") {
FB.login(function (response) {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
}, {scope: FBLoginScope});
} else {
FB.login(function (response) {
postImageToFacebook(response.authResponse.accessToken, imageData, caption, successCallback, errorCallback);
}, {scope: FBLoginScope});
}
});

Modifié à partir de: http://gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/