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

我编辑了你的小提琴并得到了以下错误：

未捕获的ReferenceError：未定义takeScreenShot

所以我改变了一些东西，似乎有效。

我在你的按钮上添加了一个ID：

case REMOVE_CART:
    return {
        ...state,
        cart: state.cart.filter((item) => payload !== item)
    }

和javascript事件（jQuery）：

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

以下是JsFiddle

html2canvas截图一直空白

1 个答案: