javascript - 使用 Javascript graph API v2.5 将照片作为多部分/表单数据发布到 Facebook

Question

Facebook 的 Graph API (v2.5) User Photo Edge 表示，有两种不同的方式将照片发布到 Facebook:

1:将照片附加为多部分/表单数据。对象的名称并不重要，但历史上人们使用 source 作为照片的参数名称。其工作原理取决于您用于发布帖子的 SDK。

2:通过使用 url 参数发布来使用互联网上已有的照片:

FB.api(
        "/me/photos",
        "POST",
        {
            "url": "{image-url}"
        },
        function (response) {
          if (response && !response.error) {
            /* handle the result */
          }
        }
);

我需要使用第一个方法(多部分)，因为我已经从 Canvas 获取了base64图像数据。

这似乎令人困惑，因为我发现文档信息不多。我知道图像的 urlData 将以某种格式与其他参数一起编码在多部分数据中。我找不到任何关于如何使用 Javascript SDK 和 graph api v2.5 执行此操作的工作示例代码/正确解释；即使在 stackoverflow 上进行了详尽的搜索之后。我在 stackoverflow 上看到了有关此问题的各种部分回答/未回答的问题......但我仍然无法让它工作。

请帮忙。谢谢 !

类似问题
Facebook Javascript Form Data Photo Upload: requires upload file error
Javascript: Upload image from Canvas to FB via Graph API
Upload Base64 Image Facebook Graph API - 不清楚Javascript Api是否已经在这里

[编辑] - 我已经尝试过的代码。

var ctx = document.getElementById('canvas2');
urldata=ctx.toDataURL("image/png");
FB.api('/photos', 'POST', {
  message: 'testing Graph API',
  access_token:  accessToken,
  url: urldata,
  no_story:true
  }, function (response) {
    if (!response || response.error) {
      console.log('Error occured:' + response.error.message);
    } else {
    alert('Post ID: ' + response.id);
    } 
    } 
);

回复-”发生错误:(#324) 图像文件丢失或无效“

Answer 1

我无法使用 JS SDK，但它可以处理简单的 AJAX 请求(使用 Fetch API、axios 或其他东西)。

首先，使用以下函数将 Canvas 图像转换为 Blob:

const dataURItoBlob = (dataURI) => {
    let byteString = atob(dataURI.split(',')[1]);
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: 'image/jpeg'
    });
}

之后，您可以通过 FormData 使用博客:

formData.append('source', blob);

来源:http://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/