upload base64 image facebook graph api how to use this script

Question

Upload Base64 Image Facebook Graph API i want to use this script that link is attached how i can use this in my wordpress post? i want to use this for fbcover photo site.

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

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