4qpmfw
Last Updated: August 15, 2016
·
25.8K
· lukasz-madon
B2bc42f69510d6a1d2c9cde1c2214d24

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.).

Picture
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");

Github

Say Thanks
Respond

10 Responses
Add your response

9160

Exelent work lucas hammering my head for weeks how to solve that THX

over 1 year ago ·
11952
D1ry0lle normal

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

over 1 year ago ·
11953
B2bc42f69510d6a1d2c9cde1c2214d24

@howtoplaysoccer There is a github link at the bottom

over 1 year ago ·
11955
D1ry0lle normal

@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

over 1 year ago ·
11956
B2bc42f69510d6a1d2c9cde1c2214d24

@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.

over 1 year ago ·
12211
00e2725a8ebd020b997854e0d07dae74 normal

Thank you very much, you saved my day. Indeed a great start with FB, rest of the social media will follow.

over 1 year ago ·
21816
Dsc00279 normal

Thank you.
your example to github is very very useful for some people !!

over 1 year ago ·
24925
None

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!

over 1 year ago ·
26616
None

Github link is removed please provide new link
Thanks in advance...

over 1 year ago ·
28062

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.

over 1 year ago ·