Facebook に HTML5 Canvas の画像を投稿する

MASW のために書いたコード.web 上に情報が錯綜しているが,この実装がシンプルで高速だと思われる.

ソース

/*
 * 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);

備考

上のコードは,ArrayBuffer/FormData/Blob の実装されていない IE9 などのブラウザでは動作しない.そもそも Blob が使えない場合は,非標準の sendAsBinary を使うか,XPCOM の nsIInputStream を使わないと安全なバイナリの POST ができないので,処理が非常に難しくなると思う.

コメントを残す

メールアドレスが公開されることはありません。