Skip to content

Instantly share code, notes, and snippets.

@hnagata
Created March 11, 2014 11:50
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save hnagata/9484200 to your computer and use it in GitHub Desktop.
Save hnagata/9484200 to your computer and use it in GitHub Desktop.
Code snippet to post a HTML5 Canvas image to Facebook
/*
* Code snippet to post a HTML5 Canvas image to Facebook
* H. Nagata
*
* Variables:
* accessToken: Facebook access token
* targetID: Posting target id such as user id or album id
* canvas: HTMLCanvasElement
* base64.decode: c.f. https://github.com/hnagata/js-base64
*
* It won't work in IE9 since using ArrayBuffer/FormData/Blob.
*/
// Convert canvas into binary data
var data_url = canvas.toDataURL();
var mime = data_url.slice(data_url.indexOf(":") + 1, data_url.indexOf(";"));
var data = base64.decode(data_url.slice(data_url.indexOf(",") + 1));
// Construct FormData
var fd = new FormData();
fd.append("access_token", accessToken);
fd.append("source", new Blob([data], {type: mime}));
// And append some fields, such as "message" and "privacy"
// POST
var req = new XMLHttpRequest();
req.open("POST", "https://graph.facebook.com/" + targetID + "/photos");
req.send(fd);
@tuannguyen2086
Copy link

I got a issue: SecurityError: The operation is insecure. for line15.

@NurulFitria
Copy link

how to implement such as share button FB, so user doesn't need to authentication ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment