Screenshot with canvas

Question

Screenshot with canvas

Navigation

#1 by (2 votes)
#2 by (-1 votes)

0

I am trying to capture a screen with canvas, I can capture it, but I want to capture a specific div in a form, since I do not want to capture the whole web. How could I do it?

    <script>
        function getScreen() {
            var caption = $('#caption-input').val();
            $("#caption-text").html(caption);
            $("#panel").hide();
            html2canvas(document.body, {
                dpi: 192,
                onrendered: function(canvas) {
                    $("#blank").attr('href', canvas.toDataURL("image/png"));
                    $("#blank").attr('download', caption + '.png');
                    $("#blank")[0].click();
                }
            });
        }
    </script>

            <div id="caption-input" class="relative pastilla"> /* Esto es lo que quiero capturar solo */
                <div>
                    <i class="icon_ash2"></i>
                </div> 
                <div class="container centrado_centrado">

                    <?php echo do_shortcode($shortcode); ?>
                </div>
                

            </div>

javascript html5

asked by Antonio Ángel Estrada Pérez 02.02.2018 в 11:01

source

2 answers

Remove the first name from each SQL SERVER office-box Error showing an Array / objects in Spring MVC

score 2 · Answer 1

instead of passing document.body as the first parameter to html2canvas pass it to the node you want to capture.

html2canvas($('#caption-input'), { ... })

EDIT In case anyone in the future sees this answer, it probably will not work because:

The current stable version of HTML2Canvas accepts a jQuery selector as I said above, but the version 1.0.0 that is currently in the alpha version, requires it to be a node of the DOM. Therefore it should be used:

either

html2canvas(document.getElementById('caption-input'), { ... })

or

html2canvas($('#caption-input')[0], { ... })

The use of a% callback onrendered also is discontinued . The correct thing to do is to use the output of html2canvas(elemento,options) as a promise.

For example:

html2canvas(jQuery('#caption-input')[0], {...options...})
.then(function(canvas) {
    $("#blank").attr('href', canvas.toDataURL("image/png"));
});

However, in the following example I can not show that change because I am using the last published stable package that is version 0.4.0 . (You can see the example in Plunkr running with HTML2Canvas version 1.0.0-alpha )

jQuery(document).ready(function() {
      jQuery('#capturar').on('click', function() {
        html2canvas(jQuery('#caption-input')[0], {
                dpi: 192,
                onrendered: function(canvas) {
                    $("#preview").attr('src', canvas.toDataURL("image/png"));
                    $("#blank").attr('href', canvas.toDataURL("image/png"));
                    $("#blank").attr('download', 'captura.png');
                    $("#blank")[0].click();
                }
            });
      });
    });

.row {
      margin-top:10px;
      border:1px solid;
    }
    .pastilla {
      border: 2px solid red;
      width: 200px;
      margin: 4px auto;
      text-align:center;
    }

<!DOCTYPE html>
<html>

<head>
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script data-require="[email protected]" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.0/html2canvas.min.js"></script>
  
</head>

<body>
  
  <div class="container-fluid">
    <div class="row">
          <div class="col-xs-6">HOLA SOY UN TEXTO QUE NO SE VA A CAPTURAR</div>
          
          <div class="col-xs-6"><button class="btn btn-info" id="capturar">Capturar el div de abajo</button></div>
    </div>
    <div class="row">
       
       <div class="col-xs-12">
      <div id="caption-input" class="relative pastilla">
                <div>
                   <i class="fa fa-birthday-cake" aria-hidden="true"></i>

                </div> 
                <div class="container centrado_centrado">

                    AQUI VA UN TEXTO CUALQUIERA QUE QUIERO CAPTURAR
                </div>
                

            </div>
          </div>
    </div>
    <div class="row" style="text-align:center">
      <div class="col-xs-12">
      AQUI IRÁ LA IMAGEN CAPTURADA
      </div>
      <div class="col-xs-12">
      <img src="" id="preview">
      </div>
      <div class="col-xs-12">
      <a class="btn btn-success" href="" id="blank">Descargar</a>
      </div>
    </div>

  </div>



</body>

</html>

score -1 · Answer 2

-1

I just had to add this code html2canvas ($ ("# caption-input"),

answered by 02.02.2018 в 11:06