上传Base64图片Facebook Graph API

我正在尝试使用Node.js将base64图像上传到FaceBook页面。 我设法得到上传与所有的多部分数据等工作，如果我从文件系统读取文件（即使用fs.readFileSync（'c：\ a.jpg'））

但是，我应该使用base64编码的图像，并尝试上传它，它给了我以下错误： {"error":{"message":"(#1) An unknown error occurred","type":"OAuthException","code":1}}

我已经尝试将其转换为二进制的new Buffer(b64string, 'base64'); 并上传，但没有运气。

我一直在为此奋斗了3天，所以anyhelp将不胜感激。

编辑：如果任何人也知道我可以如何将base64转换为二进制，并成功上传，这也适用于我。

编辑：代码片段

 var postDetails = separator + newlineConstant + 'Content-Disposition: form-data;name="access_token"' + newlineConstant + newlineConstant + accessToken + newlineConstant + separator; postDetails = postDetails + newlineConstant + 'Content-Disposition: form-data; name="message"' + newlineConstant + newlineConstant + message + newlineConstant; //Add the Image information var fileDetailsString = ''; var index = 0; var multipartBody = new Buffer(0); images.forEach(function (currentImage) { fileDetailsString = fileDetailsString + separator + newlineConstant + 'Content-Disposition: file; name="source"; filename="Image' + index + '"' + newlineConstant + 'Content-Type: image/jpeg' + newlineConstant + newlineConstant; index++; multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]); //This is what I would use if Bianry data was passed in currentImage = new Buffer (currentImage.toString('base64'), 'base64'); // The following lines are what I would use for base64 image being passed in (The appropriate lines would be enabled/disabled if I was using Binary/base64) multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]); }); multipartBody = Buffer.concat([new Buffer(postDetails), multipartBody, new Buffer(footer)]); 

Answer 1

上面的代码不适合我（缺less逗号后type:"POST",数据URI blob函数报告错误。我得到以下代码在Firefox和Chrome中工作：

 function PostImageToFacebook(authToken) { var canvas = document.getElementById("c"); var imageData = canvas.toDataURL("image/png"); try { blob = dataURItoBlob(imageData); } catch(e) { console.log(e); } var fd = new FormData(); fd.append("access_token",authToken); fd.append("source", blob); fd.append("message","Photo Text"); try { $.ajax({ url:"https://graph.facebook.com/me/photos?access_token=" + authToken, type:"POST", data:fd, processData:false, contentType:false, cache:false, success:function(data){ console.log("success " + data); }, error:function(shr,status,data){ console.log("error " + data + " Status " + shr.status); }, complete:function(){ console.log("Posted to facebook"); } }); } catch(e) { console.log(e); } } 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/png' }); } 

这里的代码在GitHub https://github.com/DanBrown180/html5-canvas-post-to-facebook-base64

Answer 2

我希望这会有用。 通过JavaScript的照片上传到FB只能使用以下方法。 这里需要的是imageData（它是base64格式的图像）和MIMEtypes。

 try { blob = dataURItoBlob(imageData,mimeType); } catch (e) { console.log(e); } var fd = new FormData(); fd.append("access_token",accessToken); fd.append("source", blob); fd.append("message","Kiss"); try { $.ajax({ url:"https://graph.facebook.com/" + <<userID received on getting user details>> + "/photos?access_token=" + <<user accessToken>>, type:"POST", data:fd, processData:false, contentType:false, cache:false, success:function(data){ console.log("success " + data); }, error:function(shr,status,data){ console.log("error " + data + " Status " + shr.status); }, complete:function(){ console.log("Ajax Complete"); } }); } catch(e) { console.log(e); } function dataURItoBlob(dataURI,mime) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs var byteString = window.atob(dataURI); // separate out the mime component // write the bytes of the string to an ArrayBuffer //var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } // write the ArrayBuffer to a blob, and you're done var blob = new Blob([ia], { type: mime }); return blob; } 

/ /编辑AJAX语法

Answer 3

丹的答案是最好的。 在这种情况下可能有用的其他东西是发布照片的可选参数：“no_story”。 此参数默认为true，强制照片文章跳过用户的墙。 通过增加

 fd.append("no_story", false); 

您可以使用照片信息更新用户的墙壁。

我只是留下这个评论，但… 50代表意见。

Answer 4

我做了和你的问题非常相似的东西。 我有一个networking摄像头快照，需要发送到Facebook粉丝页面。 这个设置是在一个人们可以拍照的餐厅​​里，然后发送到餐馆页面上。 然后人们会看到一个二维码到发布的Facebook的照片，他们可以select分享自己的个人资料。 希望这可以帮助某人，因为我search了很多，以得到这个工作的解决scheme

注意：我的图像已经被BASE64编码了。

 //imageData is a base64 encoded JPG function postSocial(imageData, message){ var ia = toUInt8Array(imageData); postImageToFacebook(mAccessTokenPage, "imageName", "image/jpeg",ia, message); } function toUInt8Array(dataURI) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs var byteString = window.atob(dataURI); // write the bytes of the string to an ArrayBuffer //var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return ia; } function postImageToFacebook( authToken, filename, mimeType, imageData, message ) { // this is the multipart/form-data boundary we'll use var boundary = '----ThisIsTheBoundary1234567890'; // let's encode our image file, which is contained in the var 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/ + {PAGE_ID} + "/photos?access_token=" + authToken, true ); xhr.onload = function() { // ... Fill in your own //Image was posted console.log(xhr.responseText); }; xhr.onerror = function(){ console.log("Error while sending the image to Facebook"); }; xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=" + boundary ); xhr.sendAsBinary( formData ); } 

Answer 5

这里是我能够使用Facebook的JS API发布图像到Facebook。 我正在使用canvasHTML5function。 这并不是每个浏览器都完全支持的。

您需要先获取图像数据。 然后将其封装在一个表单数据中。 然后，我使用FB.login API来检索访问令牌和用户ID。

  var data = $('#map >> canvas').toDataURL('image/png'); var blob; try { var byteString = atob(data.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); } blob = new Blob([ab], {type: 'image/png'}); } catch (e) { console.log(e); } var fd = new FormData(); fd.append("source", blob); fd.append("message", "Photo Text"); FB.login(function(){ var auth = FB.getAuthResponse(); $.ajax({ url:"https://graph.facebook.com/"+auth.userID+"/photos?access_token=" + auth.accessToken, type:"POST", data:fd, processData:false, contentType:false, cache:false, success:function(data){ console.log("success " + data); }, error:function(shr,status,data){ console.log("error " + data + " Status " + shr.status); }, complete:function(){ console.log("Ajax Complete"); } }); }, {scope: 'publish_actions'}); 

Answer 6

我们可以通过使用现代Fetch API而不是Uint8Array来简化图像重新编码。

  var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" fetch(url) .then(res => res.blob()) .then(blob => console.log(blob))`