Come caricare uno screenshot usando html2canvas?

Question

Utilizzo di html2canvas Come posso salvare una schermata su un oggetto? Ho esplorato le demo, e vedere che la funzione di generare lo screenshot viene generato come segue:

$(window).ready(function() { 
    ('body').html2canvas();  
}); 

Quello che ho provato a fare è

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

}); 

E, ho poi passarlo a la mia funzione upload(). Il problema che sto avendo, è che non riesco a capire dove lo screenshot è stato fatto nella libreria html2canvas() o quale funzione lo restituisce. Ho provato a convertire l'oggetto canvas usando la risposta this da SO (anche se non sono sicuro di doverlo fare).

---

ho solo chiesto un question su come caricare un file imgur, e le risposte là (in particolare @ bebraw di) mi aiuta a capire che cosa devo fare.

La funzione upload() da l'aiuto esempio 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

Ho modificato e annotato il metodo da this answer. Invia un solo file, con un nome specifico, composto da un elemento <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

Questo codice funziona per me. Genera screenshot da html2canvas, carica lo screenshot su imgur api e restituisce l'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); 
    }*/ 
}