[Firefox]Gyazoにキャプチャ画像を送るライブラリ

gyazoCapture.js

/**
 * @fileoverview Gyazo にキャプチャ画像をアップロードするライブラリ
 * @author teramako teramako.at.gmail.com
 * @license MPL 1.1
 * @requires Firefox, Chrome特権
 * @example
 *  // 表示画面のキャプチャを 3/4 スケールで撮る
 *  var win = gBrowser.mCurrentBrowser.contentWindow;
 *  var file = createCaptureFile(win, win.scrollX, win.scrollY, win.innerWidth, win.innerHeight, 0.75);
 *  uploadGyazo(file, function callback (url) {
 *    gBrowser.loadOneTab(url, { inBackground: false })
 *  });
 */

/**
 * キャプチャをCanvasに描いて、そのFileオブジェクトを返す
 * @param {Window} win  キャプチャするWindowオブジェクト
 * @param {Number} [x=0] x 座標
 * @param {Number} [y=0] y 座標
 * @param {Number} [width] 幅 (実際の幅は width * scale)
 * @param {Number} [height] 高さ (実際の高さは height * scale)
 * @param {Number} [scale=1] スケール
 * @return {File}
 */
function createCaptureFile (win, x, y, width, height, scale) {
  var contentRect = win.document.documentElement.getBoundingClientRect();
  x = x || 0;
  y = y || 0;
  width = width || (contentRect.width - x);
  height = height || (contentRect.height - y);
  scale = scale || 1;

  if (x + width > contentRect.width)
    width = contentRect.width - x;

  if (y + height > contentRect.height)
    height = contentRect.height - y;

  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
  canvas.mozOpaque = true;
  canvas.width = width * scale;
  canvas.height = height * scale;

  var ctx = canvas.getContext("2d");
  ctx.scale(scale, scale);
  ctx.drawWindow(win, x, y, width, height, "white");

  return canvas.mozGetAsFile("imagedata", "image/png");
}


/**
 * Gyazo ID
 * とりあえず、ユニーク値を生成する UUID の MD5ハッシュ値
 * @type {String}
 */
var GYAZO_ID = (function() {
  var UUID = Cc["@mozilla.org/uuid-generator;1"].getService(Ci.nsIUUIDGenerator).generateUUID().toString();
  function toHexString (charCode) {
    return ("0" + charCode.toString(16)).slice(-2);
  }
  function getMD5String (str) {
    var conv = Cc["@mozilla.org/intl/scriptableunicodeconverter"].createInstance(Ci.nsIScriptableUnicodeConverter);
    conv.charset = "UTF-8";
    var res = {};
    var data = conv.convertToByteArray(str, res);
    var ch = Cc["@mozilla.org/security/hash;1"].createInstance(Ci.nsICryptoHash);
    ch.init(ch.MD5);
    ch.update(data, data.length);

    var hash = ch.finish(false);

    return [toHexString(hash.charCodeAt(i)) for (i in hash)].join("");
  }
  return getMD5String(UUID);
})();

/**
 * Gyazoへアップロード
 * @param {File} file
 * @param {Function} callback
 */
function uploadGyazo (file, callback) {
  var form = new FormData();
  form.append("id", GYAZO_ID);
  form.append("imagedata", file);
  
  var xhr = new XMLHttpRequest();
  xhr.mozBackgroundRequest = true;
  xhr.upload.addEventListener("progress", function (event) {
    var msg = "Uploading to Gyazo ... ";
    if (event.lengthComputable) {
      let persent = Math.round(event.loaded / event.total * 100);
      msg += persent + " %"
    }
    window.XULBrowserWindow.setJSDefaultStatus(msg);
  },false);
  xhr.open("POST", "http://gyazo.com/upload.cgi", true);
  xhr.onload = function (event) {
    var XBW = window.XULBrowserWindow;
    XBW.setJSDefaultStatus("Done uploading");
    window.setTimeout(function (XBW) {
      XBW.setJSDefaultStatus("");
    }, 3000, XBW);
    if (callback)
      callback(xhr.responseText);
  };
  xhr.send(form);
}