การโพสต์รูปภาพที่สร้างจาก canvas ด้วย Javascript ไปยัง Facebook

window.fbAsyncInit = function () {
  FB.init({
    appId: 'FACEBOOK_APP_ID',
    cookie: true,
    status: true,
    xfbml: true,
    version: 'v2.8'
  });
};
(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {
    return;
  }
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/th_TH/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

var doPostToFacebook = function () {
  // วาดรุปภาพแล้วส่งกลับเป็นข้อมูล DOMString
  var image = draw().toDataURL("image/png");
  try {
    // แปลงเป็นข้อมูลสำหรับโพสต์
    blob = dataURItoBlob(image);
  } catch (e) {
  }
  // เข้าระบบด้วย Facebook
  FB.getLoginStatus(function (response) {
    if (response.status === "connected") {
      postImageToFacebook(response.authResponse.accessToken, blob);
    } else if (response.status === "not_authorized") {
      FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, blob);
      }, {scope: "publish_actions"});
    } else {
      FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, blob);
      }, {scope: "publish_actions"});
    }
  });
}

function postImageToFacebook(token, image) {
  var fd = new FormData();
  fd.append("access_token", token);
  fd.append("source", image);
  fd.append("no_story", true);
  var req = new GAjax({
    contentType: null
  });
  // โพสต์ไปยังอัลบัมของ Facebbok
  req.send("https://graph.facebook.com/me/photos?access_token=" + token, fd, function (xhr) {
      // ข้อมูลส่งครับ
    var data = xhr.responseText.toJSON();
    // คืนค่า ID ของโพสต์
    console.log(data.id);
  });
}

FB.api(
  "/" + data.id + "?fields=images",
  function (response) {
    if (response && !response.error) {
      // URL ของรูปภาพที่โพสต์
      console.log(response.images[0].source);
    }
  }
);

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
  object: {
    'og:title': document.title,
    'og:image:width': 476,
    'og:image:height': 476,
    'og:image': response.images[0].source,
    'og:url': response.images[0].source
  }
});

/**
 * ฟังก์ชั่นโพสต์ไปยัง Facebook
 *
 * @param {string} token
 * @param {string} image
 */
function postImageToFacebook(token, image) {
  var fd = new FormData();
  fd.append("access_token", token);
  fd.append("source", image);
  fd.append("no_story", true);
  var req = new GAjax({
    contentType: null
  });
  // โพสต์ไปยังอัลบัมของ Facebbok
  req.send("https://graph.facebook.com/me/photos?access_token=" + token, fd, function (xhr) {
    var data = xhr.responseText.toJSON();
    // โพสต์ไปยัง Facebook สำเร็จคืนค่า id ของโพสต์กลับมา
    // อ่านรูปภาพจาก id ของโพสต์
    FB.api(
      "/" + data.id + "?fields=images",
      function (response) {
        if (response && !response.error) {
          // โพสต์รูปภาพที่อ่านได้ไปยังหน้า wall ของ Facebook
          FB.ui({
            method: 'share_open_graph',
            action_type: 'og.shares',
            action_properties: JSON.stringify({
              object: {
                'og:title': document.title,
                'og:image:width': 476,
                'og:image:height': 476,
                'og:image': response.images[0].source,
                'og:url': response.images[0].source
              }
            })
          });
        }
      }
    );
  });
}
/**
 * แปลงรูปภาพเป็นข้อมูลสำหรับโพสต์
 *
 * @param {string} dataURI
 * @returns {Blob}
 */
function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], {
    type: 'image/png'
  });
}
/**
 * ฟังก์ขั่นสร้างรูปภาพด้วย canvas
 *
 * @returns {Element|draw.canvas}
 */
function  draw() {
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 800;
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 800, 800);
  return canvas;
}
/**
 * ฟังก์ชั่น เรียกเมื่อต้องการโพสต์ไปยัง Facebook
 */
var doPostToFacebook = function () {
  // วาดรุปภาพแล้วส่งกลับเป็นข้อมูล DOMString
  var image = draw().toDataURL("image/png");
  try {
    // แปลงเป็นข้อมูลสำหรับโพสต์
    blob = dataURItoBlob(image);
  } catch (e) {
  }
  // เข้าระบบด้วย Facebook
  FB.getLoginStatus(function (response) {
    if (response.status === "connected") {
      postImageToFacebook(response.authResponse.accessToken, blob);
    } else if (response.status === "not_authorized") {
      FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, blob);
      }, {scope: "publish_actions"});
    } else {
      FB.login(function (response) {
        postImageToFacebook(response.authResponse.accessToken, blob);
      }, {scope: "publish_actions"});
    }
  });
};
window.fbAsyncInit = function () {
  FB.init({
    appId: 'FACEBOOK_APP_ID',
    cookie: true,
    status: true,
    xfbml: true,
    version: 'v2.8'
  });
};
(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {
    return;
  }
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/th_TH/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));