Facebook JavaScript SDK – Photo upload from Canvas

This article explains how to upload a photo to Facebook with the Graph API, directly from a Canvas element. No server is needed, as in my recent article about Facebook upload with FormData.

Basically, you just have to get the Canvas data as a Base64 String, turn it into a Blob and use the Blog to upload the picture. The function to turn a Base64 String into a Blob is well known and can be found on Stackoverflow, Github and other platforms. It is basically always the same:

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'
    });
}

With that function in our pocket, it is quite easy to upload a Canvas image to Facebook:

const upload = async (response, page_token) => {
    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?access_token=${page_token}`, {
        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_pages
        //get Page Token for upload
        upload(response, page_token);
    }, {scope: 'manage_pages,publish_pages'})
})