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

问题描述

使用 html2canvas 我怎么能保存屏幕截图为一个对象？我一直在探索的演示，并看到该函数生成生成截图如下：

  $（窗口）。就绪（函数（）{
  （身体）html2canvas（）;
}）;
 

我已经试过做的是

  $（窗口）。就绪（函数（）{
  。canvasRecord = $（'身体'）html2canvas（）;
  dataURL = canvasRecord.toDataURL（图像/ PNG）;
  dataURL = dataURL.replace（/ ^数据：影像\ /（PNG | JPG）的base64，/，）;
  上传（dataURL）;

}）;
 

和，然后我把它传给我的上传（）功能。这个问题我有，是我无法揣摩出正在取得在 html2canvas（）库的截图还是什么函数返回。我试着用这从这么回答（虽然我不能肯定我需要这样做）转换画布对象

---

我刚刚问了一个<一个href="http://stackoverflow.com/questions/9249659/uploading-a-png-to-imgur-using-javascript">question如何上传文件到 imgur ，答案有（特别是@ bebraw的）帮助我明白我需要做的。

在上传（）的功能是从Imgur例如API帮助：

 函数上传（文件）{
   //文件是从＆LT;输入＆GT;标签或Drag'n降
   //是文件的图像？
   如果（文件|| file.type.match（/图* /）！。）回报;

   // 它是！
   //让我们建立一个FORMDATA对象
   变种FD =新FORMDATA（）;
   fd.append（形象，文件）; //附加文件
   fd.append（钥匙，的myKey）; //获取自己的密钥：http://api.imgur.com/

   //创建XHR（跨域XHR FTW！）
   VAR XHR =新XMLHtt prequest（）;
   xhr.open（POST，http://api.imgur.com/2/upload.json）; // Boooom！
   xhr.onload =功能（）{
      //大赢！
      //图片的网址是：
      JSON.parse（xhr.responseText）.upload.links.imgur_page;
   }

   //好吧，我不处理错误。一个exercice读者。
   //现在，我们送FORMDATA
   xhr.send（FD）;
}
 

解决方案

我已经修改和注释的方法<一href="http://stackoverflow.com/a/5303242/938089?sending-images-from-canvas-elements-using-ajax-and-php-files">this回答。它仅发送一个文件，以给定的名称，从由＆LT;画布＆GT; 元素

 如果（！（'sendAsBinary在XMLHtt prequest.prototype））{
  XMLHtt prequest.prototype.sendAsBinary =功能（串）{
    VAR字节= Array.prototype.map.call（字符串函数（三）{
      返回c.char $ C $猫（0）及0xFF的;
    }）;
    this.send（新Uint8Array（字节）.buffer）;
  };
}

/ *
 * @description上载通过的multipart / form-data的文件，通过一个帆布ELT
 * @参数URL字符串：URL发布数据
 * @参数名字符串：表单元素的名称
 * @参数FN字符串：文件名
 *参数帆布HTMLCanvasElement：canvas元素。
 * @参数字符串类型：内容类型，例如，图像/ PNG
 *** /
功能postCanvasToURL（URL，域名，FN，帆布，类型）{
  VAR数据= canvas.toDataURL（类型）;
  数据= data.replace（'数据：'+型+';的base64'，''）;

  VAR XHR =新XMLHtt prequest（）;
  xhr.open（POST，网址，真实）;
  VAR边界='ohaiimaboundary';
  xhr.setRequestHeader（
    内容类型，多部分/格式数据;边界='+界）;
  xhr.sendAsBinary（[
    ' - '+边界，
    内容处置：表格数据; NAME =+名字+';文件名=+ FN +''，
    内容类型：+型，
    ''，
    ATOB（数据），
    ' - '+边界+' - '
  ]。加入（'\ r \ N'））;
}
 

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

What I've tried doing is

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

});

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).

---

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.

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

解决方案

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

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