如何使用 html2canvas 上传屏幕截图? [英] How to upload a screenshot using html2canvas?

问题描述

使用 html2canvas 如何将屏幕截图保存到对象?一直在探索demo，看到生成截图的函数生成如下:

Using html2canvas how can I save a screen shot to an object? I've been exploring the demos, and see that the function to generate the screenshot is generated as follows:

$(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 的 this 答案转换画布对象(尽管我不确定是否需要这样做).

And, I then pass it to my upload() function. The problem I am having, is I can't figure out where the screenshot is being made in the html2canvas() library or what function returns it. I've tried converting the canvas object using this answer from SO (though I'm not certain I need to do this).

我刚刚问了一个关于如何上传文件的问题imgur，那里的答案(尤其是 @bebraw 的)帮助我了解我需要做什么.

I just asked a question on how to upload a file to imgur, and the answers there (particularly @bebraw's) help me to understand what I need to do.

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

The upload() function is from the Imgur example api help:

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

推荐答案

我已经修改并注释了 这个答案.它只发送一个具有给定名称的文件，由 <canvas> 元素组成.

I have modified and annotated the method from this answer. It sends only one file, with a given name, composed from a <canvas> element.

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('
'));
}

这篇关于如何使用 html2canvas 上传屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！