Как загрузить скриншот с помощью html2canvas?

Question

Использование 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's) помогают мне понять, что мне нужно делать.

Функция upload()пример API Imgur:

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

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

Answer 2

Этот код работает для меня. Он создаст скриншот с помощью html2canvas, загрузит скриншот в imgur api и вернет URL imgur.

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

Answer 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);
    }*/
}