与 FB 图形 API 共享 base64 图像但无法加载资源答案

【问题标题】：share base64 image with FB graph API but failed to load resource与 FB 图形 API 共享 base64 图像但无法加载资源
【发布时间】：2016-01-20 18:21:50
【问题描述】：

我找到了一些与使用 FB 图形 API 共享 base64 图像相关的信息：Upload Base64 Image Facebook Graph API

但是，我无法让它成功。

这是我的完整源代码：

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<canvas id="myCanvas" width="578" height="400"></canvas>

<script>

var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function(){
    context.drawImage(imageObj,69,50);
  };

imageObj.src = 'data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

function share_image(){
  var pic = document.getElementById('myCanvas');
  var data = pic.toDataURL("image/png");
  /*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'});
        }
          </script>

            <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'XXXXXXXXXXXXXXXXXXX',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


    <button type='button' onclick='share_image()'>share on FB</button>


</body>

</html>

我使用了调试器，错误信息显示... " 加载资源失败：服务器响应状态为 403 (OK)

错误正常状态 403

Ajax 完成"

错误输出是

{
   "data": [

   ]
}

更奇怪的是，我得到的用户ID似乎与我登录的用户ID不同。不知道为什么……

【问题讨论】：

标签： facebook facebook-graph-api

【解决方案1】：

您必须将图像附加为 multipart/form-data (see rfc) 这是由 GraphAPI 指定的 documentation

HTML

<a href="#" id="upload-trigger" onClick="javascript:fileUpload();">File Upload!</a>
<form id="upload-photo-form" target="upload_iframe" method="post" enctype="multipart/form-data">
<input id="upload-photo-form-file" name="file" size="27" type="file" />
</form>

function fileUpload() {
FB.api('/me/albums', function(response) {
var album = response.data[0]; // Now, upload the image to first found album for easiness.
var action_url = 'https://graph.facebook.com/' + album.id + '/photos?access_token=' +  accessToken;
var form = document.getElementById('upload-photo-form');
form.setAttribute('action', action_url);

form.submit();
});
}

found here

【讨论】：

你的意思是我需要把这些东西放到我的代码中吗？我应该把它们放在哪里？ " Content-Disposition: file; filename="file1.png" Content-Type: image/png Content-Transfer-Encoding: binary" ..
@Markus Hupfauer 我不太了解您的代码....我应该将base64图像的src放在您的代码中的什么位置？