Is it possible to share an image to facebook using a data URI?

Question

I have several canvases positioned over each other that merge into one as data URI. Everything works fine and I can get the composite image to show up on the page, but the other funcitonality I require is to create the URI and then share to facebook. I wanted to try to do this without sending to the server and do it all client side.

the code isn't necessary to the problem but if you want to see it

<ul class="button-group even-2">
                        <li><span id='merge-canvas' class="button expand">Save Image</span></li>
                        <li><span id='share-facebook' class="button expand facebook" >Share</span></li>
</ul>

with the javascript looking like this.

// DROPBOX AND FILE READER

function noopHandler(evt) {
        evt.stopPropagation();
        evt.preventDefault();
    }

    function drop(evt) {
        evt.stopPropagation();
        evt.preventDefault();

    var files = evt.dataTransfer.files;
    var count = files.length;

    // Only call the handler if 1 or more files was dropped.
    if (count > 0) {

    }
        handleFiles(files);

}

function handleFiles(files) {
    var file = files[0];

    document.getElementById("droplabel").innerHTML = "Processing " + file.name;

    var reader = new FileReader();

    // init the reader event handlers
    reader.onloadend = handleReaderLoadEnd;

    // begin the read operation
    reader.readAsDataURL(file);
}

function handleReaderLoadEnd(evt) {

    // basically clears and redraws the face canvas on load of the users image
    document.getElementById("droplabel").innerHTML = "Picture Added Successfully!";
    var $canvas = $('canvas');
    ctx = $canvas[0].getContext('2d');
    face = new Image();
    face.onload = function() {
        ctx.drawImage(face, 0, 0, 500, (face.height/face.width) * 500);
        }

    face.src = evt.target.result;
    return face;
}

function initializeDropbox() {
    var dropbox = document.getElementById("dropbox")

    // adds different events for the dropbox and points to the relevant function

    dropbox.addEventListener("dragenter", noopHandler, false);
    dropbox.addEventListener("dragexit", noopHandler, false);
    dropbox.addEventListener("dragover", noopHandler, false);
    dropbox.addEventListener("drop", drop, false);
}

which produces a really really long data URI! Any ideas to accomplish the share?

Answer 1

You can post an image via URL or multipart/form-data in the source parameter:

https://developers.facebook.com/docs/graph-api/reference/v2.1/user/photos

/* make the API call */
FB.api(
    "/me/photos",
    "POST",
    {
        "source": "{image-data}"
    },
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);