10

html2canvasを使用して、スクリーンショットをオブジェクトに保存するにはどうすればよいですか? デモを調べてみたところ、スクリーンショットを生成する関数が次のように生成されていることがわかりました。

$(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()ライブラリのどこで作成されているのか、またはどの関数がそれを返すのかがわからないことです。SOからのこの回答を使用してキャンバスオブジェクトを変換しようとしました(ただし、これを行う必要があるかどうかはわかりません)。

imgurにファイルをアップロードする方法について質問したところ、そこにある回答 (特に @bebraw のもの) は、何をする必要があるかを理解するのに役立ちます。

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);
}
4

3 に答える 3

7

この回答からメソッドを変更して注釈を付けました。要素から構成された、指定された名前のファイルを 1 つだけ送信します<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'));
}
于 2012-02-12T17:15:24.697 に答える