Utilisation de HTML2CANVAS Comment puis-je enregistrer un écran à un objet? J'ai exploré les démos et je vois que la fonction de générer la capture d'écran est générée comme suit: Ce que j'ai essayé de faire est p> et, je le transmettes ensuite à mon Je viens de me demander un Question a> sur la façon de télécharger un fichier sur imgur , et les réponses là-bas (en particulier @ Bebraw's) m'aidez à comprendre quoi J'ai besoin de faire. P> Le téléchargement Télécharger () code> fonction. Le problème que j'ai, est que je ne peux pas comprendre où la capture d'écran est faite dans la bibliothèque HTML2Canvas () code> ou quelle fonction le renvoie. J'ai essayé de convertir l'objet en toile en utilisant Cette Répondre de si (bien que je ne sois pas certaine que je dois faire cela) . P>
() code> La fonction est de l'aide de l'API d'exemple Imgur: P> 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 Réponses :
J'ai modifié et annoté la méthode à partir de Cette réponse . Il n'envoie qu'un seul fichier, avec un nom donné, composé d'un
Le code ressemble-t-il à la magie à vous? C'est juste une implémentation de multipart / form-données - voir multipart / form-données sur w3.org (faites défiler vers le bas pour un exemple).
Un peu de magie! Je comprends mieux les concepts. Hors de ma zone de confort, mais en le ramassant. Merci encore pour l'explication complète.
Ce code fonctionne pour moi. Il générera une capture d'écran par HTML2Canvas, téléchargez la capture d'écran sur IMGUR API et renvoyez 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>
//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);
}*/
}
Quelle est la fonction
téléchargement ? LeDataURL est une chaîne de basebase64 sans type mime. Est-ce que cela est destiné?@ROBW Je viens d'ajouter la fonction
upload () - je ne comprends pas ce que la fonctiondataurl est (encore); Je l'ai ajouté car il a été utilisé dans l'exemple pour convertir unen toile à une image (autant que je puisse dire).La méthode correcte est
var canvasrecord = nouveau html2canvas (document.body) .Canvas; combiner le résultat avec cette réponse .Merci @ROBW - Cela renvoie définitivement un
Canvas . Je suis toujours un peu confus cependant; Comment puis-je raconter la question que vous avez liée à ce canevas? Je pensais que j'ai juste besoin de convertir la toile en une image.Comprenez-vous le format de limite? Si oui, vous pouvez facilement ajouter
clé = myKey à votre soumission, puis vous avez terminé. Sinon, donnez-vous juste un cri et je vais aider davantage.@ROBW Un aspect de
HTML2Canvas me confondre toujours. Existe-t-il un moyen d'empêcher la bibliothèque de superposer la capture d'écran sur la fenêtre du navigateur actuel? Malgré la lecture de la bibliothèque, je ne comprends toujours pas complètement comment cela fonctionne.Que voulez-vous dire par superposition? Pour les futurs lecteurs: voici le code source de
html2Canvas .Lorsque j'utilise
var canvasrecord = nouveau html2canvas (document.body) .Canvas; ,canvasrecord stocke l'objet canvas , mais lehtml2canvas () La fonction place également cet objet en haut de la page Web.Regardez le sommet du code source . Vous devriez réellement utiliser de nouveaux html2canvas (document.body, {Fonction Prêt: fonction (Canvasrecord) {/ * faire quelque chose. * /}})
. (Par défaut, la méthode Ready` ajoute la toile au document).Ah, je vois. Merci encore d'avoir expliqué.