如何使用html2canvas上传截图？

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:

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

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

然后，我将它传递给我的upload（）函数。我遇到的问题是，我无法弄清楚在html2canvas（）库中制作屏幕截图的位置或者什么函数返回它。我尝试使用SO的答案转换画布对象（虽然我不确定我需要这样做）。

---

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.

我刚问了一个关于如何将文件上传到imgur的问题，那里的答案（尤其是@bebraw）帮助我理解我需要做什么。

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

upload（）函数来自Imgur示例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);
}

3 个解决方案

#1

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

#2

This code works for me. It will generate screenshot by html2canvas, upload the screenshot to imgur api, and return the imgur url.

这段代码适合我。它将通过html2canvas生成屏幕截图，将屏幕截图上传到imgur api，然后返回imgur url。

<button class="upload" >Upload to Imgur</button> 
<script>
$(".upload").on("click", function(event) {
    html2canvas($('body'), {
  onrendered: function(canvas) {
  document.body.appendChild(canvas);
      try {
      var img = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
  } catch(e) {
      var img = canvas.toDataURL().split(',')[1];
  }
  // open the popup in the click handler so it will not be blocked
  var w = window.open();
  w.document.write('Uploading...');
  // upload to imgur using jquery/CORS
  // https://developer.mozilla.org/En/HTTP_access_control
  $.ajax({
      url: 'http://api.imgur.com/2/upload.json',
      type: 'POST',
      data: {
          type: 'base64',
          // get your key here, quick and fast http://imgur.com/register/api_anon
          key: 'your api key',
          name: 'neon.jpg',
          title: 'test title',
          caption: 'test caption',
          image: img
      },
      dataType: 'json'
  }).success(function(data) {
      w.location.href = data['upload']['links']['imgur_page'];
  }).error(function() {
      alert('Could not reach api.imgur.com. Sorry :(');
      w.close();
  });
  },
  });
  });
</script>

#3

//Here I am using html2Canvas to capture screen and Java websockets to transfer data to server
//Limitation:Supported on latest browsers and Tomcat
Step1)Client Side : webSock.html  
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Arun HTML File -->>
<html>
<head>
<meta charset="utf-8">
<title>Tomcat web socket</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
<script type="text/javascript"> 
var ws = new WebSocket("ws://localhost:8080/WebSocketSample/wsocket");
ws.onopen = function () {
    console.log("Web Socket Open");
};

   ws.onmessage = function(message) {
       console.log("MSG from Server :"+message.data);
//document.getElementById("msgArea").textContent += message.data + "\n";    
document.getElementById("msgArea").textContent +" Data Send\n";    
   };
 function postToServerNew(data) {
ws.send(JSON.stringify(data));
document.getElementById("msg").value = "";
}

//Set Interval
setInterval(function(){
 var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
  var jsonData = {
        type: 'video', 
        data: data, 
        duration: 5 , 
        timestamp: 0,   // set in worker
        currentFolder: 0,// set in worker
    }; 
postToServerNew(jsonData);
   }
 });
},9000);

function closeConnect() {
ws.close();
console.log("Web Socket Closed: Bye TC");
}
</script>
</head>

<body>
  <div>
<textarea rows="18" cols="150" id="msgArea" readonly></textarea>
</div>
<div>
<input id="msg" type="text"/>
<button type="submit" id="sendButton" onclick="postToServerNew('Arun')">Send MSG</button>
</div>
</body>
</html>

Step2)Server Side   
File 1)   
package Arun.Work;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.RandomAccessFile;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.nio.MappedByteBuffer;
import java.nio.channels.AsynchronousFileChannel;
import java.nio.channels.FileChannel;
import java.nio.charset.Charset;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.Future;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;

/**
 * Need tomcat-koyote.jar on class path, otherwise has compile error
 * "the hierarchy of the type ... is inconsistent"
 * 
 * @author Arun
 * 
 */
public class MyInBound extends MessageInbound {

    private String name;

    private WsOutbound myoutbound;

    private String targetLocation;

    public MyInBound(HttpServletRequest httpSerbletRequest, String targetLocation) {
        this.targetLocation = targetLocation;
    }

    @Override
    public void onOpen(WsOutbound outbound) {
        System.out.println("Web Socket Opened..");
        /*this.myoutbound = outbound;
        try {
            this.myoutbound.writeTextMessage(CharBuffer.wrap("Web Socket Opened.."));

        } catch (Exception e) {
            throw new RuntimeException(e);
        }*/

    }

    @Override
    public void onClose(int status) {
        System.out.println("Close client");
        // remove from list
    }

    @Override
    protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
        System.out.println("onBinaryMessage Data");
        try {
            writeToFileNIOWay(new File(targetLocation), arg0.toString() + "\n");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {

            //this.myoutbound.flush();
        }
    }// end of onBinaryMessage

    @Override
    protected void onTextMessage(CharBuffer inChar) throws IOException {
        System.out.println("onTextMessage Data");
        try {

            writeToFileNIOWay(new File(targetLocation), inChar.toString() + "\n");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {

            //this.myoutbound.flush();
        }
    }// end of onTextMessage

    public void writeToFileNIOWay(File file, String messageToWrite) throws IOException {
        System.out.println("Data Location:"+file+"            Size:"+messageToWrite.length());
        //synchronized (this){

          byte[] messageBytes = messageToWrite.getBytes();
          RandomAccessFile raf = new RandomAccessFile(file, "rw");
          raf.seek(raf.length());
          FileChannel fc = raf.getChannel();
          MappedByteBuffer mbf = fc.map(FileChannel.MapMode.READ_WRITE, fc.position(), messageBytes.length);
          mbf.put(messageBytes);
         fc.close();
        //}


    }//end of method

    /*
     * //Working Fine public void writeToFileNIOWay(File file, String
     * messageToWrite) throws IOException { byte[] messageBytes =
     * messageToWrite.getBytes(Charset.forName("ISO-8859-1")); RandomAccessFile
     * raf = new RandomAccessFile(file, "rw"); raf.seek(raf.length());
     * FileChannel fc = raf.getChannel(); MappedByteBuffer mbf =
     * fc.map(FileChannel.MapMode.READ_WRITE, fc.position(),
     * messageBytes.length);
     * 
     * mbf.put(messageBytes); fc.close(); }
     */
}


File 2)     
package Arun.Work;

import java.io.File;
import java.util.concurrent.ConcurrentHashMap;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;

/**
 * WebSocketServlet is contained in catalina.jar. It also needs servlet-api.jar
 * on build path
 * 
 * @author Arun
 * 
 */
@WebServlet("/wsocket")
public class MyWebSocketServlet extends WebSocketServlet {

    private static final long serialVersionUID = 1L;

    // for new clients, <sessionId, streamInBound>
    private static ConcurrentHashMap<String, StreamInbound> clients = new ConcurrentHashMap<String, StreamInbound>();

    @Override
    protected StreamInbound createWebSocketInbound(String protocol, HttpServletRequest httpServletRequest) {

        // Check if exists
        HttpSession session = httpServletRequest.getSession();

        // find client
        StreamInbound client = clients.get(session.getId());
        if (null != client) {
            return client;

        } else {
            System.out.println(" session.getId() :"+session.getId());
            String targetLocation = "C:/Users/arsingh/Desktop/AnupData/DATA/"+session.getId();
            System.out.println(targetLocation);
            File fs=new File(targetLocation);
            boolean bool=fs.mkdirs();
            System.out.println(" Folder created :"+bool);
            client = new MyInBound(httpServletRequest,targetLocation+"/Output.txt");
            clients.put(session.getId(), client);
        }

        return client;
    }

    /*public StreamInbound getClient(String sessionId) {
        return clients.get(sessionId);
    }

    public void addClient(String sessionId, StreamInbound streamInBound) {
        clients.put(sessionId, streamInBound);
    }*/
}