ejemplos - screenshot javascript html5

crear una captura de pantalla de la página web usando html2canvas(no se puede inicializar correctamente)

Question

Estoy intentando usar http://html2canvas.hertzen.com/ para tomar capturas de pantalla de mi página web. No puedo inicializar un elemento de lienzo usando ...

var canvas = $(''body'').html2canvas();

Si pudiera conseguir un lienzo adecuado, seguiría con algo como

var dataUrl = canvas.toDataURL(); //get''s image string
window.open(dataUrl);             // display image

Desafortunadamente, la documentación es muy limitada de la OMI. http://html2canvas.hertzen.com/documentation.html . No creo que deba precargarme, ya que no estoy usando ningún gráfico dinámico (pero de todos modos ni siquiera estoy llegando tan lejos)

Simplemente soy demasiado noob para entender si este tipo está teniendo éxito con la captura de pantalla usando html2canvas

Parece que no me estoy alejando más que este compañero ... ¿Cómo subir una captura de pantalla usando html2canvas?

Mi solución ideal demostraría cómo crear una captura de pantalla con un código mínimo. (Copie el HTML en el lienzo. Acceda a la cadenaDataURL. Cadena de salida)

CUALQUIER punto de vista es muy apreciado =)

Answer 1

Deberías usarlo de esta manera:

$(''body'').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

Me tomó unas pocas horas descubrirlo, cómo usarlo de la manera correcta. Se requiere el {elements:{length:1}} , debido a la implementación incompleta del complemento, de lo contrario obtendrá un error.

¡Buena suerte!

Answer 2

Esto es lo que funcionó para mí.

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

Esto creó una nueva ventana para la captura de pantalla.

Solo quería una parte de mi página en la captura de pantalla, específicamente un div contenedor. Así que hice lo siguiente:

html2canvas($(''#myDiv''), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

Para las personas que buscan la misma pregunta, si las opciones anteriores no ayudan, espero que esto sea así.

Answer 3

Para obtener una parte de la página, puede utilizarla de esta manera:

$(''#map'').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}

Answer 4

Puede usar el siguiente código para capturar una captura de pantalla y descargar la captura de pantalla.

creación de botón html

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

definición de la función

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $(''#box1'').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv/:11/./)) 
        {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,''Test file.png'');
  }
  else {
    $(''#test'').attr(''href'', canvas.toDataURL("image/png"));
    $(''#test'').attr(''download'',''screenshot.png'');
    $(''#test'')[0].click();
  }


  }
});
}  
</script>

nota : he creado un botón html donde he llamado a la función. test es un atributo y box1 es para obtener los elementos del lienzo.

Answer 5

También puedes usar lo siguiente:

var html2obj = html2canvas($(''body''));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);