上传 Base64 图片 Facebook Graph API

IT技术 javascript node.js facebook-graph-api encoding base64
2021-03-14 13:09:00

我正在尝试使用 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 天,因此将不胜感激。

编辑:如果有人也知道我如何将 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)]);
6个回答

我希望这会很有用。通过仅在 javascript 的帮助下将照片上传到 FB,您可以使用以下方法。这里需要的是 imageData(它是图像的 base64 格式)和 mime 类型。

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语法

是的。它工作正常。是的,当您发送它进行 blob 转换时,您必须删除“data:image/png;base64”部分。
2021-04-17 13:09:00
你收到什么错误?你的意思是说你的formdata没有传递给facebook??
2021-04-18 13:09:00
你让这个工作了吗?我无法得到正确的回应。对于 dataURI,您是否删除了“data:image/png;base64”部分?
2021-04-27 13:09:00
圣,莫莉。这有效!在这里抱怨之前应该对其进行更多调整。你是个奇迹创造者!
2021-04-28 13:09:00
希望有人看到这个!我正在尝试同样的事情,但我似乎总是从 Facebook 收到错误消息,我的 FormData 显示空数组。有任何想法吗??!
2021-05-14 13:09:00

上面的代码对我来说不太适用(缺少逗号之后type:"POST",和 blob 函数的数据 URI 报告了错误。我得到了以下代码可以在 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上的代码

我已经尝试了你的代码,我与 Facebook 的通信似乎有效,但我有一个问题,即 fd (FormData) 是空的,只显示空数组。有任何想法吗?
2021-04-16 13:09:00

丹的回答效果最好。在这种情况下可能有帮助的其他内容是发布照片的可选参数:'no_story'。此参数默认为 true,强制照片发布跳过用户的墙。通过添加

fd.append("no_story", false);

您可以使用照片贴更新用户的墙。

我会留下这个作为评论但是... 50 代表评论。

这听起来像是一个重要的功能!嘿......你需要在这里花更多的时间!
2021-05-10 13:09:00

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

 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

 fetch(url)
  .then(res => res.blob())
  .then(blob => console.log(blob))`
唯一的问题是它是一个实验性功能(caniuse.com/#feat=mdn-api_body_blob)。所以在生产中使用它时要小心。
2021-05-06 13:09:00

我做了与你的问题非常相似的事情。我有一个需要发布到 Facebook 粉丝页面的网络摄像头快照。设置在一家餐厅,人们可以在那里拍照并将其发布到餐厅页面上。然后人们会看到张贴的 facebook 照片的二维码,他们可以选择在自己的个人资料上分享。希望这可以帮助某人,因为我搜索了很多以获得这个工作解决方案

注意:我的图像已经是 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 );
    }