Hide image taken by html2canvas

Navigation
1

I need the screenshot that is taken with html2canvas to be in a hidden div, since it is shown on the page and I definitely do not want it to do that. I tried putting the div in the html giving it an id but it does not work. This is the code I have for the capture: 

$scope.pdfExport = function() {
  html2canvas(document.body, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: 300,
    height: 100
  });
  html2canvas($("#tablaTransferencia"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
  });
}
    
asked by Yunue Iñiguez González 12.06.2016 в 01:02
source

2 answers

0

to save the photo in% hidden% co:

The way would be to add the photo inside an invisible block, a possible way is by adding the canvas to a div that is already hidden in advance. 

var tomarInstantanea = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            var divoculto = document.getElementById('divoculto');
            divoculto.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
}

#divoculto {
     /* puedes comprobar la ocultacion comentando esta linea */
     display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="tomarInstantanea()">tomar foto</button>

<div id="divoculto">
  
</div>

to hide the <div> to photograph:

The trick would be to put <div> . In the following example I have also used visibility: hidden so that it does not appear in the main layout and position: fixed so that it does not affect button events. I hope it helps you. 

var tomarInstantanea = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
#target{
    position: fixed;
    visibility: hidden;
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="tomarInstantanea()">tomar foto</button>
    
answered by 12.06.2016 / 02:01
source
1

The problem that I see, is that in the code you show, it does not appear which object is "canvas". The fact is that if to that object, you indicate a style "visibility: hidden", it would be hidden.

Try adding this line before "document.body.appendChild (canvas);"

canvas.style.visibility="hidden";

    
answered by 12.06.2016 в 13:55
TypeError: Can not call method "getThreads" of null managing Modem connections using Java