html2canvas截圖一直出現如下圖所示的空白

Question

我試圖讓圖像的截圖，以紫紅色線（所以下面的標題爲「今天的衣服」的權利（截圖）。

我使用html2canvas要做到這一點，但每次我點擊「快照」按鈕，我不斷收到一個空白屏幕截圖

這是我的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> 

這裏是我的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(); 
     } 
    }); 
} 

這裏是我的代碼縮短向下的jsfiddle： https://jsfiddle.net/e51yepcz/

有誰知道爲什麼快照不工作或者我該如何解決？謝謝。

Answer 1

我編輯你的小提琴，得到了以下錯誤：

Uncaught ReferenceError: takeScreenShot is not defined

所以我改變了一些東西，似乎工作。

我添加了一個ID，以您的按鈕：

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

和JavaScript事件（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(); 
    } 
    }); 
}); 

這裏是JsFiddle