CODEWITHSUNDEEP
javascripthtmlhtml2canvas
captain_jon_sparrow
captain_jon_sparrow

Reputation: 91

html2canvas screenshot keeps turning up blank

I am trying to get a screenshot of the images to the right of the mauve line (so below the heading "today's outfit" (screenshot shown below).

enter image description here I'm using html2canvas to do this, but each time I click the "snapshot" button, I keep getting a blank screenshot.

Here is my HTML:

<div id="sidebar"><br/><center><h1 class = "outfitheading">Today's Outfit</h1></center>
  <div id = "outfit">
    <center><div class = "clothediv" id = "hatdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">

    </div></center>
    <center><div class = "clothediv" id= "semitopdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">

      </div></center>


     <center><div class = "clothediv" id = "topdiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">

     </div></center>


   <center><div class = "clothediv" id = "legweardiv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">

     </div></center>


  <center><div class = "clothediv" id = "shoediv" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
  </div></center>


  </div>

  <button onclick="takeScreenShot()">Snapshot</button>
  <center><div id= "likebutton" style = "display:none; visibility: hidden">
    <a href = "#" ><i id = "outlinehearticon" class="fa fa-heart-o fa-2x" aria-hidden="true" onclick = {fillHeart()}></i></a>
    <a href = "#"  ><i id = "filledhearticon" class="fa fa-heart fa-2x" aria-hidden="true" style = "display:none; visibility: visible" onclick = {unfillHeart()}></i></a>

    <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover(); 
      });
    </script>

  </div></center>
      <br/>
      <br/>
 <div class = "buttons"><center>
      <button class = "btn btn-lg btn-secondary generatebutton" style = "display: inline-block" type = "button"  id= "generateoutfitbutton" onclick = {generateOutfit()}>Generate Outfit</button> 
      <!--<p><center>or</center></p>-->
      &nbsp
      &nbsp

      <button class = "btn btn-lg btn-secondary collagebutton" style = "display: inline-block" type = "button" id= "collagebutton" onclick = {clearCanvas()}>Make your Own</button></center>
</div>

</div>

And here is my javascript:

var takeScreenShot = function() {
    html2canvas(document.getElementById("outfit"), {
        onrendered: function (canvas) {
            var tempcanvas=document.createElement('canvas');
            tempcanvas.width=465.5;
            tempcanvas.height=524;
            var context=tempcanvas.getContext('2d');
            context.drawImage(canvas,465.5,40,465.5,524,0,0,465.5,524);
            var link=document.createElement("a");
            link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
            link.download = 'screenshot.jpg';
            link.click();
        }
    });
}

Here is a shortened-down jsfiddle for my code: https://jsfiddle.net/e51yepcz/

Does anyone know why the snapshot doesn't work or how I can fix it? Thanks.

Upvotes: 4

Views: 15017

Answers (1)

Kurohige
Kurohige

Reputation: 1418

I edited your fiddle and got following error:

Uncaught ReferenceError: takeScreenShot is not defined

So I changed something and seems to work.

I added an id to your button:

<center><button id="snap">Snapshot</button></center>

and the javascript event (jQuery):

 $('#snap').click(function () {
 html2canvas(document.getElementById("outfit"), {
 onrendered: function(canvas) {
    var tempcanvas = document.createElement('canvas');
    tempcanvas.width=465;
    tempcanvas.height=524;
    var context=tempcanvas.getContext('2d');
    context.drawImage(canvas,465,40,465,524,0,0,465,524);
    var link=document.createElement("a");
    link.href=canvas.toDataURL('image/jpg');
    link.download = 'screenshot.jpg';
    link.click();
    }
  });
});

Here is the JsFiddle

Upvotes: 1

Related Questions