Question

我找到了一些与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>

我使用过调试器，错误信息显示... ＆＃34;无法加载资源：服务器响应状态为403（确定）

错误确定状态403

Ajax Complete＆＃34;

错误输出

{
   "data": [

   ]
}

另一个奇怪的事情是，我得到的用户ID似乎与我登录的用户ID不同。我不知道为什么......

Answer 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>

JS

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

使用FB图API共享base64图像但无法加载资源

1 个答案: