Post
Ask Question

Converting Facebook Image At URL To Binary Format In AngularJS

Many people are not aware that images can be inlined into HTML code. The method by which this is done is called Base64 encoding.

I am trying to upload a Base64 image to a Facebook page, using Node.js. I have managed to get the upload working with all the multipart data etc., which needs to be read from the file system (i.e. using fs.readFileSync('c:\a.jpg')

However, I  used the Base64 encoded image and tried to upload it, which gave me the error -{"error":{"message":"(#1) An unknown error occurred","type":"OAuthException","code":1}}

I have tried converting it to binary by new Buffer(b64string, 'base64') and uploading that, but I had no luck.

I have been struggling with this for 3 days now, so any help would be greatly appreciated.

Edit

If anyone also knows how I could convert the Base64 to binary and successfully upload it in a way which would also work for me please share.

Edit : Code Snippet

I hope, this will be useful. By doing photo upload to FB only with the help of AngularJS, you can use the following method. The required things are imageData (which is Base64 format of the image) and the mime type.

Pass & check values to binary conversion

Base64 encoded images become part of HTML and display without loading anything rather than a Web Browser having to download the image.
  1. function testAPI() {  
  2.     console.log('Welcome! Fetching your information.... ');  
  3.     FB.api('/me?fields=id,name,picture.type(large)', function(response) {  
  4.         console.log(response);  
  5.         $scope.name = response.name;  
  6.         $scope.id = response.id;  
  7.         var url = response.picture.data.url;  
  8.         convertFileToDataURLviaFileReader(url);  
  9.         $scope.FBuserdata();  
  10.     });  
  11. }  
URL 'http://www.aboutcity.net/images/web-technology-experts-notes.jpg'; 
  1. function convertFileToDataURLviaFileReader(url) {  
  2.     var xhr = new XMLHttpRequest();  
  3.     xhr.responseType = 'blob';  
  4.     xhr.onload = function() {  
  5.         var reader = new FileReader();  
  6.         reader.onloadend = function() {  
  7.             var Profile = reader.result;  
  8.             $scope.GetFBIamge = Profile.replace(/data:image\/jpeg;base64,/g, '');  
  9.             $window.localStorage.setItem('ProfileImage', JSON.stringify($scope.GetFBIamge));  
  10.         }  
  11.         reader.readAsDataURL(xhr.response);  
  12.     };  
  13.     xhr.open('GET', url);  
  14.     xhr.send();  
  15. }   
Here is a snippet of the beginning of the data.../9j/4AAQSkZJRgABAQEASABIAAD/2wBDABcQERQRDhcUEhQaGBcbI‌jk I have updated the post to put in a snippet of the upload section. The multipart data etc. all works when I have a binary image passed on it, it all works 100%, but when I have a Base64 image passed in it, it doesn't work.