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

Github