¿Usa HTML5 Canvas para capturar parte de una página web?

Sé que puede capturar imágenes de una secuencia de video HTML5 utilizando un lienzo y mostrarlas en la página. Lo que me interesa es si puede usar el objeto canvas para crear una superposición en la parte superior de una página web y luego capturar una instantánea PNG de esa página o parte de ella.¿Usa HTML5 Canvas para capturar parte de una página web?

Me gustaría mejorar nuestras herramientas de revisión del sitio web agregando capturas de pantalla (dentro de la página del navegador) que luego podrían enviarse a un servidor remoto.

YouTrack hace esto con un applet de Java, pero ¿es posible con las técnicas HTML5 modernas?

Cualquier otra solución sugerida a este problema también sería apreciada.

Gracias

Fuente

2011-06-24 Richard

Estoy bastante seguro de que todos los navegadores que soportan la lona hacen fuera de la pantalla de representación continuación, compuesto en la página después de los comandos de dibujo, por lo que haría imposible. Lo siento. –

posible duplicado de [Usando HTML5/Canvas/Javascript para tomar capturas de pantalla] (http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – ChrisF

Eche un vistazo a [Compartir pantalla pestaña del navegador en HTML5] (http://www.html5rocks.com/en/tutorials/streaming/screenshare/). Se trata de compartir la pantalla, pero puedes simplificar esto para simplemente tomar una captura de pantalla de una sola página. – falconepl

Esto se pregunta mucho. La respuesta corta es que no se puede hacer por razones de seguridad.

Las respuestas más largas incluyen la mención de la función drawWindow que solo Firefox tiene, que solo funciona localmente (nuevamente, por razones de seguridad). En el futuro, puede funcionar una vez que el usuario da permiso, como en el caso de los applets de Java de hoy. En el futuro, incluso podría ser parte de las especificaciones y no una cosa única hecha por Mozilla.

Si te estás volviendo loco, podrías intentar crear un procesador de HTML completo, tomar el árbol DOM para la página e intentar renderizarlo en Canvas. Esta es una misión tonta.

Fuente

2011-06-24 14:05:43

Puede "emular" la vista de la pantalla leyendo el DOM y creando una imagen de lienzo con javascript. Eche un vistazo a http://hertzen.com/experiments/jsfeedback/ y la secuencia de comandos subyacente html2canvas para tener una idea de cómo puede hacerlo con Javascript puro (no se necesitan complementos ni interacción con el servidor).

Fuente

2011-07-13 16:36:56 Niklas

Existe la posibilidad de insertar su HTML en una imagen SVG y convertir ese SVG en lienzo. Existen limitaciones en cuanto a lo que el HTML puede contener (por ejemplo, no tiene JavaScript ni recursos externos, por lo que las imágenes deben codificarse en URL de datos). Teniendo esto en cuenta, puede hacer su trabajo.

Esta técnica está documentada y demostrada on MDN.

Fuente

2012-11-30 19:19:12 user7610

Este script le permite tomar "capturas de pantalla" de páginas web o partes de ellas, directamente en el navegador de los usuarios. La captura de pantalla se basa en el DOM y, como tal, puede no ser 100% precisa para la representación real, ya que no hace una captura de pantalla real, sino que construye la captura de pantalla basada en la información disponible en la página.

http://html2canvas.hertzen.com/

Fuente

2013-07-12 17:43:41 RWHepburn

¿Usa HTML5 Canvas para capturar parte de una página web?

Respuesta

Cuestiones relacionadas