upload base64 image facebook graph api how to use this script

2 comments

1. Take a look at this code I hacked together from various examples – you can use this to post a pure base64 string to the Facebook API – no server side processing.

   Here’s a demo: http://rocky-plains-2911.herokuapp.com/

   This javascript handles the converting of a HTML5 Canvas element to base64 and using the Facebook API to post the image string

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

   This handles the Facebook Authentication and shows basic HTML setup

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

   Log in to Reply

2. I needed this too, and was not happy with all the code around it because it is lengthy and usually needs jQuery. Here is my code for uploading from Canvas to Facebook:

   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'
       });
   }
   const upload = async (response) => {
       let canvas = document.getElementById('canvas');
       let dataURL = canvas.toDataURL('image/jpeg', 1.0);
       let blob = dataURItoBlob(dataURL);
       let formData = new FormData();
       formData.append('access_token', response.authResponse.accessToken);
       formData.append('source', blob);
   
       let responseFB = await fetch(`https://graph.facebook.com/me/photos`, {
           body: formData,
           method: 'post'
       });
       responseFB = await responseFB.json();
       console.log(responseFB);
   };
   document.getElementById('upload').addEventListener('click', () => {
       FB.login((response) => {
           //TODO check if user is logged in and authorized publish_actions
           upload(response);
       }, {scope: 'publish_actions'})
   })
   

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

   Log in to Reply