Javascript Girl
  1. Javascript Girl
  3. Téléchargement d'une image de toile sur facebook sous forme de bloc de multiparties / type de formulaire
Intereting Posts
Timegap Accéléromètre y valeur en degrés Double colons dans la déclaration de fonction en Javascript? Comment accélérer l'animation de la disposition de la force dans d3.js Open source scorm player javascript pur et html? Impossible de lire les «paramètres» de propriété de indéfinis lorsque je clique sur le bouton Envoyer JS mouseenter déclenché deux fois Comment obtenir une chaîne binaire de ArrayBuffer? Le bouton ne fonctionne pas avec le Panneau de mise à jour Désactiver le champ de saisie lorsque la case à cocher bascule (JQuery) Redimensionner la hauteur de l'iframe en fonction de la hauteur du contenu Comment saisir correctement les erreurs dans les promesses? Composants angulaires de 2 UI – quelle bibliothèque? Comment voyager dans un tableau d'objet n dimensionnel en Javascript? Pourquoi est-ce que je reçois "Reducer retourné indéfini pendant l'initialisation" en dépit de fournir initialState à createStore ()? Pouvez-vous modifier une fonction Javascript après la déclarer?

Téléchargement d'une image de toile sur facebook sous forme de bloc de multiparties / type de formulaire

J'essaie d'utiliser l'api facebook pour télécharger une image à partir d'un canevas que je sauvegarde sur la page: 

var file = dataURItoBlob(canvas.toDataURL('image/jpeg', 1.0)) FB.api('/me/photos', 'POST', { source: file, message: 'photo description' }, function (response) { console.log(response) } )

C'est le converseur blob: 

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

Et je reçois une erreur: message: "(#324) Requires upload file" , il semble que le chargeur ne reconnaisse pas le blob comme un fichier valide.

MISE À JOUR 1:

Je place cette publication: Convertir des données URI en fichier puis ajouter à FormData sur la conversion de blob en formData, l'essayé comme suit: 

 var dataURL = canvas.toDataURL('image/jpeg', 1.0) var blob = dataURItoBlob(dataURL) var fd = new FormData(document.forms[0]) fd.append("canvasImage", blob) FB.api('/me/photos', 'POST', { source: fd .....

Mais toujours la même erreur.

MISE À JOUR 2:

J'ai même essayé cette solution de publication XHR, en utilisant les javascript de Facebook pour publier des images codées multiparties / form-data et obtenir toujours un problème de fichier "Your photos couldn't be uploaded. Photos should be less than 4 MB and saved as JPG, PNG, GIF or TIFF files." 

 function postImageToFacebook(access_token) { var filename = "samplepic.png", mimeType = "image/png", message = "test comment", data = canvas.toDataURL("image/png"), encodedPng = data.substring(data.indexOf(',') + 1, data.length), imageData = atob(encodedPng); // build the multipart/form-data var boundary = '----ThisIsTheBoundary1234567890'; var formData = '--' + boundary + '\r\n' formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n'; formData += 'Content-Type: ' + mimeType + '\r\n\r\n'; for (var i = 0; i < imageData.length; ++i) { formData += String.fromCharCode(imageData[i] & 0xff); } formData += '\r\n'; formData += '--' + boundary + '\r\n'; formData += 'Content-Disposition: form-data; name="message"\r\n\r\n'; formData += message + '\r\n' formData += '--' + boundary + '--\r\n'; var xhr = new XMLHttpRequest(); xhr.open( 'POST', 'https://graph.facebook.com/v2.5/me/photos?access_token=' + access_token, true ); xhr.onload = xhr.onerror = function() { console.log( xhr.responseText ); }; xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary ); xhr.send( formData ); }

J'ai compris, pour une raison quelconque, que les problèmes étaient les en-têtes que j'ai essayé d'appliquer comme solution pour un problème précédent … Voici une solution de travail: https://jsfiddle.net/ilyador/vyne7oh2/8/ 

 function fbUpload(token){ var dataURL = canvas.toDataURL('image/jpeg', 1.0) var blob = dataURItoBlob(dataURL) var formData = new FormData() formData.append('token', token) formData.append('source', blob) var xhr = new XMLHttpRequest(); xhr.open( 'POST', 'https://graph.facebook.com/me/photos', true ) xhr.onload = xhr.onerror = function() { console.log( xhr.responseText ) }; xhr.send( formData ) } 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' }); }