Is it possible to use image in facebook using data URI?

Question

I have several canvases located one above the other, which merge into one as a data URI. Everything works fine, and I can get a composite image that will be displayed on the page, but I need other functionality - create a URI and then share it on facebook. I wanted to try to do this without sending it to the server and do it all on the client side.

the code is not needed for 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> 

since javascript is as follows.

 // 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 creates a really very long data URI! Any ideas to achieve this share?

Answer 1

You can send the image via URL or multipart / form-data in the original 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 */ } } );