如何使用html2canvas上传屏幕截图？

Using html2canvas http://html2canvas.hertzen.com/如何将屏幕截图保存到对象？我一直在探索演示，发现生成屏幕截图的函数生成如下：

$(window).ready(function() {
  ('body').html2canvas();       
});

我尝试做的是

$(window).ready(function() {
  canvasRecord = $('body').html2canvas(); 
  dataURL = canvasRecord.toDataURL("image/png");
  dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  upload(dataURL);

});

然后，我将它传递给我的upload()功能。我遇到的问题是我无法弄清楚屏幕截图是在哪里制作的html2canvas()库或什么函数返回它。我尝试使用转换画布对象this https://stackoverflow.com/a/934925/258755SO的回答（虽然我不确定我需要这样做）。

我刚刚问了一个question https://stackoverflow.com/questions/9249659/uploading-a-png-to-imgur-using-javascript关于如何将文件上传到imgur http://imgur.com/，那里的答案（特别是@bebraw的）帮助我理解我需要做什么。

The upload()函数来自 Imgur 示例 api 帮助：

function upload(file) {
   // file is from a <input> tag or from Drag'n Drop
   // Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   // It is!
   // Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); // Append the file
   fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/

   // Create the XHR (Cross-Domain XHR FTW!!!)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
   xhr.onload = function() {
      // Big win!
      // The URL of the image is:
      JSON.parse(xhr.responseText).upload.links.imgur_page;
   }

   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata
   xhr.send(fd);
}

我已经修改并注释了该方法这个答案 https://stackoverflow.com/a/5303242/938089?sending-images-from-canvas-elements-using-ajax-and-php-files。它只发送一个具有给定名称的文件，该文件由<canvas>元素。

if (!('sendAsBinary' in XMLHttpRequest.prototype)) {
  XMLHttpRequest.prototype.sendAsBinary = function(string) {
    var bytes = Array.prototype.map.call(string, function(c) {
      return c.charCodeAt(0) & 0xff;
    });
    this.send(new Uint8Array(bytes).buffer);
  };
}

/*
 * @description        Uploads a file via multipart/form-data, via a Canvas elt
 * @param url  String: Url to post the data
 * @param name String: name of form element
 * @param fn   String: Name of file
 * @param canvas HTMLCanvasElement: The canvas element.
 * @param type String: Content-Type, eg image/png
 ***/
function postCanvasToURL(url, name, fn, canvas, type) {
  var data = canvas.toDataURL(type);
  data = data.replace('data:' + type + ';base64,', '');

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  var boundary = 'ohaiimaboundary';
  xhr.setRequestHeader(
    'Content-Type', 'multipart/form-data; boundary=' + boundary);
  xhr.sendAsBinary([
    '--' + boundary,
    'Content-Disposition: form-data; name="' + name + '"; filename="' + fn + '"',
    'Content-Type: ' + type,
    '',
    atob(data),
    '--' + boundary + '--'
  ].join('\r\n'));
}