上傳base64圖像facebook圖形api如何使用這個腳本

Question

Upload Base64 Image Facebook Graph API 我想使用這個腳本，鏈接是附加我怎麼能在我的wordpress文章中使用這個？ 我想用這個fbcover照片網站。

Answer 1

看看這段代碼，我從各種例子中入侵了你 - 你可以用它來發佈一個純粹的base64字符串到Facebook API - 沒有服務器端處理。

這裏有一個演示：http://rocky-plains-2911.herokuapp.com/

這個JavaScript處理一個HTML5 Canvas元素爲base64的轉換，並使用Facebook的API發佈圖像串

<script type = "text/javascript"> 
// Post a BASE64 Encoded PNG Image to facebook 
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); 
      $("#poster").html("Posted Canvas Successfully"); 
     }, 
     error: function (shr, status, data) { 
      console.log("error " + data + " Status " + shr.status); 
     }, 
     complete: function() { 
      console.log("Posted to facebook"); 
     } 
    }); 

} catch (e) { 
    console.log(e); 
} 
} 

// Convert a data URI to blob 
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' 
}); 
} 
</script> 

此處理Facebook的身份驗證並顯示基本HTML設置

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajaxSetup({ 
      cache: true 
     }); 
     $.getScript('//connect.facebook.net/en_UK/all.js', function() { 
      // Load the APP/SDK 
      FB.init({ 
       appId: '288585397909199', // App ID from the App Dashboard 
       cookie: true, // set sessions cookies to allow your server to access the session? 
       xfbml: true, // parse XFBML tags on this page? 
       frictionlessRequests: true, 
       oauth: true 
      }); 

      FB.login(function (response) { 
       if (response.authResponse) { 
        window.authToken = response.authResponse.accessToken; 
       } else { 

       } 
      }, { 
       scope: 'publish_actions,publish_stream' 
      }); 

     }); 

     // Populate the canvas 
     var c = document.getElementById("c"); 
     var ctx = c.getContext("2d"); 

     ctx.font = "20px Georgia"; 
     ctx.fillText("This will be posted to Facebook as an image", 10, 50); 

    }); 
</script> 
<div id="fb-root"></div> 
<canvas id="c" width="500" height="500"></canvas> 
<a id="poster" href="#" onclick="PostImageToFacebook(window.authToken)">Post Canvas Image To Facebook</a>