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).

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: /

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

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).

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/e51yepcz/

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

• javascript
• html
• html2canvas

Share Improve this question Follow edited Aug 6, 2017 at 3:28 captain_jon_sparrow asked Aug 5, 2017 at 15:33 captain_jon_sparrowcaptain_jon_sparrow 9122 gold badges44 silver badges1010 bronze badges 5

• 465.5 ?.. Have you tried using an integer instead? I don't think you will have much luck with half pixels. – 2pha Commented Aug 5, 2017 at 17:39
• Have you tried just outputting the canvas that is returned to the onrendered callback instead of your temp canvas? Just to make sure it is what is expected. – 2pha Commented Aug 5, 2017 at 17:46
• I tried replacing all the 465.5s with 465s, but I still get blank screenshots. – captain_jon_sparrow Commented Aug 5, 2017 at 17:48
• @2pha when I output the canvas instead of tempcanvas, the result is also blank, so I guess that's why I'm getting blank shots with tempcanvas as well; but on console logging the canvas, I can see that the width is 466 and the height is 440 pixels, so do you know why there isn't anything in it? – captain_jon_sparrow Commented Aug 5, 2017 at 18:02
• There is no way for me to know without seeing your code, and even then I would just be guessing. I can see you are using <center> tags which tells me you are using an old HTML standard or using something old to generate your code. This I think is your main problem. put some interactive code somewhere (in your post or jsfiddle) if you want more help – 2pha Commented Aug 6, 2017 at 2:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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