html5 - html2 - screenshot jquery div
¿Puedes tomar una "captura de pantalla" de la página usando Canvas? (7)
Tengo una página donde estamos posicionando un grupo de elementos usando CSS y cambiando sus posiciones "arriba y a la izquierda" usando JS.
He recibido informes de que estas cosas no se alinearon correctamente, pero el usuario tiene motivos para mentir sobre esto para "hacer trampa", por lo que no estoy seguro de si dicen la verdad. Estoy tratando de encontrar una forma de averiguar si están mintiendo o no, y de tener alguna "prueba".
Sé que Canvas tiene un método para copiar información de imagen de un elemento de imagen u otro elemento canvas (tipo de operación BitBlt).
¿Sería posible de alguna manera, con Canvas (o con algo más, Flash, lo que sea), tomar una "imagen" de una parte de la página?
Nuevamente, no estoy tratando de tomar información de una <image> . Intento copiar lo que ve el usuario, que está compuesto por varios elementos HTML posicionados de manera absoluta (y me preocupan más por esas posiciones) y de alguna manera subir eso al servidor.
Entiendo que esto no se puede hacer, pero tal vez me esté perdiendo algo.
¿Algunas ideas?
Alguien hizo una pregunta anterior que es algo similar a esto. Desplácese hasta la parte inferior de Youtube y haga clic en el enlace "Informar un error". La herramienta de comentarios de Google (impulsada por Javascript) básicamente hace lo que usted describió. A juzgar por lo que vi de su código, usa lienzo y tiene un codificador JPEG basado en JavaScript que crea una imagen JPG para enviar a Google.
Definitivamente sería mucho trabajo, pero estoy seguro de que podría lograr algo similar.
En Firefox, puede crear un AddOn que use canvas.drawWindow para dibujar contenido web en un lienzo. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
No creo que haya una manera de hacerlo en WebKit en este momento.
No creo que puedas hacer eso. Sin embargo, puede buscar recurrentemente clientHeight , clientWidth , offsetTop y offsetLeft para determinar las posiciones de todos los elementos en la página y enviarlos de vuelta al servidor.
Puedes usar el element , que actualmente solo es compatible con Firefox.
background: -moz-element(#mysite);
Aquí #mysite es el elemento cuyo contenido se usa como fondo
Abrir en Firefox: http://jsfiddle.net/qu2kz/3/ (probado en FF 27)
Sí, puedes ver la siguiente demostración. En el código siguiente, tengo la tabla de definición dentro de la etiqueta del cuerpo, pero cuando ejecutas este código, se mostrará una instantánea de la imagen.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js?rev032"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $(''body'');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
}
});
});
</script>
</head>
<body>
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
Documentación oficial de html2canvas: - http://html2canvas.hertzen.com/
Para descargar la biblioteca html2canvas.js, puede usarla también si no puede encontrarla desde el enlace oficial: - https://github.com/niklasvh/html2canvas/downloads [No soy responsable de este enlace: P: P: P]
Si una solución comercial es una opción, revisa SnapEngage . Haga clic en el botón "Ayuda" en la parte superior derecha para verlo en acción. Aquí hay una captura de pantalla:-
La configuración es bastante sencilla, solo tienes que copiar y pegar unas pocas líneas de código javascript.
SnapEngage usa un Applet de Java para tomar capturas de pantalla. Here hay una publicación de blog sobre cómo funciona.
Se puede hacer, con algunas limitaciones . Hay algunas técnicas, y estas son exactamente cuántas extensiones hacen las capturas de pantalla. Según su descripción, parece que no está buscando una solución genérica para el cliente, sino algo que un usuario o algunos usuarios podrían usar y enviar, por lo que creo que usar una extensión estaría bien.
Cromo:
Puedo indicarle mi extensión de código abierto de Chrome, Blipshot, que hace exactamente eso: https://github.com/folletto/Blipshot
Solo para dar algunos antecedentes:
- Puedes hacerlo, hasta donde yo sé, solo desde dentro de una extensión, ya que usa una función interna.
- La función es
chrome.tabs.captureVisibleTaby requiere acceso a las pestañas del manifiesto. - La función solo captura la parte visible de la pestaña activa, por lo que si solo necesita eso, está bien. Si necesita algo más que, debería echarle un vistazo a todo el script, ya que es bastante complicado obtener la captura de pantalla de la página completa hasta que Google solucione el error # 45209 .
Firefox:
En Firefox desde 1.5 puedes construir extensiones que usan una extensión personalizada de canvas, drawWindow , que es más poderosa que el equivalente de Chrome de chrome.tabs.captureVisibleTab . Algunas informaciones están aquí: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas