Sharing HTML5 canvas images to directly to Facebook
TL;DR I made a small web app that sends the content of HTML 5 canvas directly to Facebook, without intermediate storage. It converts canvas UrlData which is base64 to png and posts it to user's wall.
Do you pine the days of Heroes of Might and Magic III? :) Amazing game. A few days ago I stumble upon a great post on Hacker News. I haven't use AWS before so I was curious to try it out. I wanted to make something a bit more sophisticated than a hello world app, then this idea of an event generator emerged (Game has a periodic events, usually with funny titles.).
this one is not actually from the game
I wanted to add a sharing for events. My first idea was to make a simple Heroku app that puts objects to S3. Amazon S3 is really a great tool, but can be very expensive (especially when you don't make money on it). Can I do better? Sure. I found SO post explaining how to convert canvas data to png and send it with XHR. The meritum is in postCanvastoFacebook function
function postCanvasToFacebook() {
var data = canvas.toDataURL("image/png");
var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = Base64Binary.decode(encodedPng);
FB.getLoginStatus(function(response) {
if (response.status === "connected") { and then depending on different statuses function calls postImageToFacebook
postImageToFacebook(response.authResponse.accessToken, "heroesgenerator", "image/png", decodedPng, "www.heroesgenerator.com");Written by lukas
Related protips
10 Responses
Exelent work lucas hammering my head for weeks how to solve that THX
Could you provide a full example of how to implement this code? I have managed to integrate canvas in my site. I have a specific div with ID set for this purpose. Now I would like to convert the canvas to image and make it readey for sharing on FB and Twitter. Can this be done? How? Thanks, Goran
@howtoplaysoccer There is a github link at the bottom
@lukasz-madon Ok, found it. But still, have no idea how to implement it and also if it is allowed to implement it? Do you share it for free?
I have managed to convert canavas to png on the fly now. So I have one step letf, how to add FB share button to share it on visitors wall.
Any help appreciated.
BEst,
Goran
@howtoplaysoccer You can do whatever you want with the code.
There are plenty ways to add share button. First register a facebook app to get the token.
Thank you very much, you saved my day. Indeed a great start with FB, rest of the social media will follow.
Thank you.
your example to github is very very useful for some people !!
WOW! that's truly awesome Lukasz, thank you so much! working like a charm here; I had same idea, but ignore it would have been so complex, and I could have not do it any soon!
I have a question: could you please elaborate a little bit on the final object being sent? I see you post it as a picture to FB graph api; instead, I would like to post it against FB.feed or open graph object. In that case, what I should exactly post? I tried with decodedPng , cause auth token should be handled in FB.ui, but does not work and I would be happy with a little debrief. Thank you!
Github link is removed please provide new link
Thanks in advance...
Very nice Tutorial, If the editor of this post is still active. I have a question.
- How can i tag a friend while posting it on facebook. I am using taggable_friends and already have user taggable id. I am using your code.
Have a fresh tip? Share with Coderwall community!
