Problem when exporting with HTML2Canvas

Question

Problem when exporting with HTML2Canvas

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I need to capture a div by clicking on a <a id="capture">exportar png</a> and then automatically save it in a folder could you help me with some serious example of a lot of help. Thanks.

$(function() {
  function downloadCanvas(canvasId, filename) {
    // Obteniendo la etiqueta la cual se desea convertir en imagen
    var domElement = document.getElementById(canvasId);

    // Utilizando la función html2canvas para hacer la conversión
    html2canvas(domElement, {
      onrendered: function(domElementCanvas) {
        // Obteniendo el contexto del canvas ya generado
        var context = domElementCanvas.getContext('2d');

        // Creando enlace para descargar la imagen generada
        var link = document.createElement('a');
        link.href = domElementCanvas.toDataURL("img/png");
        link.download = filename;

        // Chequeando para browsers más viejos
        if (document.createEvent) {
          var event = document.createEvent('MouseEvents');
          // Simulando clic para descargar
          event.initMouseEvent("click", true, true, window, 0,
            0, 0, 0, 0,
            false, false, false, false,
            0, null);
          link.dispatchEvent(event);
        } else {
          // Simulando clic para descargar
          link.click();
        }
      }
    });
  }

  // Haciendo la conversión y descarga de la imagen al presionar el botón
  $('#boton-descarga').click(function() {
    downloadCanvas('imagen', 'imagen.png');
  });
});

<html>

<head>
  <meta charset="utf-8">
  <title> Convertir HTML en imagen </title>
  <meta name="robots" content="noindex, nofollow">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>


</head>

<body>
  <div id="imagen">
    aqui es lo que quiero convertir o capturar en imagen para descargar automaticamente en la caperta /img.
  </div>
  <a id="boton-descarga" href="#!">Descargar imagen</a>
</body>

</html>

javascript

asked by michael Ramirez 23.04.2018 в 16:30

source

2 answers

Problem with sources in FPDF Problems to bring content with Query in Wordpress

score 0 · Answer 1

OK, The solution is the following

Since the onrendered event is obsolete, html2canvas (domElement) .then (domElementCanvas = & gt {{ // FUNCTION HERE });

REPLACING IT IN YOUR CODE WOULD REMAIN SO.

$(function() {
        function downloadCanvas(canvasId, filename) {
            // Obteniendo la etiqueta la cual se desea convertir en imagen
            var domElement = document.getElementById(canvasId);


        html2canvas(domElement).then(domElementCanvas => {
            var context = domElementCanvas.getContext('2d');

            // Creando enlace para descargar la imagen generada
            var link = document.createElement('a');
            link.href = domElementCanvas.toDataURL("img/png");
            link.download = filename;

            // Chequeando para browsers más viejos
            if (document.createEvent) {
            var event = document.createEvent('MouseEvents');
            // Simulando clic para descargar
            event.initMouseEvent("click", true, true, window, 0,
                0, 0, 0, 0,
                false, false, false, false,
                0, null);
            link.dispatchEvent(event);
            } else {
            // Simulando clic para descargar
            link.click();
            }

            // Haciendo la conversión y descarga de la imagen al presionar el botón
        });
    }
            $('#boton-descarga').click(function() {
                downloadCanvas('imagen', 'imagen.png');
            });
    });

I hope and serve you ...

score 0 · Answer 2

Many thanks to all of you and I managed to solve a part, add to the name of the file to download the current date and time. investigate but still can not download the image automatically.

$(function() {
            function downloadCanvas(canvasId, filename) {
            // Obteniendo la etiqueta la cual se desea convertir en imagen
            var domElement = document.getElementById(canvasId);


            html2canvas(domElement).then(domElementCanvas => {
                var context = domElementCanvas.getContext('2d');

            // Creando enlace para descargar la imagen generada
            var link = document.createElement('a');
            link.href = domElementCanvas.toDataURL("img/png");
            link.download = filename;

            // Chequeando para browsers más viejos
            if (document.createEvent) {
                var event = document.createEvent('MouseEvents');
            // Simulando clic para descargar
            event.initMouseEvent("click", true, true, window, 0,
                0, 0, 0, 0,
                false, false, false, false,
                0, null);
            link.dispatchEvent(event);
        } else {
            // Simulando clic para descargar
            link.click();
        }

            // Haciendo la conversión y descarga de la imagen al presionar el botón
        });
        }
        $('#boton-descarga').click(function() {
            var fecha = new Date();
            var year = fecha.getFullYear();
            var mon = fecha.getMonth();
            var day = fecha.getDate();
            var hour = fecha.getHours();
            var minutes = fecha.getMinutes();
            downloadCanvas('imagen', 'imagen_'+year+'_'+(mon+1)+'_'+day+'_'+hour+minutes+'.png');
        });
    });