html2canvas 屏幕截图一直显示为空白

Posted 2023-03-14

【中文标题】html2canvas 屏幕截图一直显示为空白

【英文标题】：html2canvas screenshot keeps turning up blank

【发布时间】：2018-01-13 09:14:30

【问题描述】：

我正在尝试获取紫红色线右侧的图像屏幕截图（因此在标题“今天的装备”下方（屏幕截图如下所示）。

我正在使用 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/

有谁知道为什么快照不起作用或者我该如何修复它？谢谢。

【问题讨论】：

465.5 ?.. 你试过用整数代替吗？我不认为半像素你会很幸运。

您是否尝试过只输出返回到 onrendered 回调的画布而不是临时画布？只是为了确保它符合预期。

我尝试用 465s 替换所有 465.5s，但我仍然得到空白屏幕截图。

@2pha 当我输出画布而不是 tempcanvas 时，结果也是空白的，所以我想这就是为什么我也使用 tempcanvas 获得空白照片的原因；但是在控制台记录画布时，我可以看到宽度是 466，高度是 440 像素，所以你知道为什么里面什么都没有吗？

如果没有看到您的代码，我无法知道，即使那样我也只是猜测。我可以看到您正在使用 <center> 标签，这告诉我您正在使用旧的 HTML 标准或使用旧的东西来生成您的代码。我认为这是你的主要问题。如果您需要更多帮助，请在某处（在您的帖子或 jsfiddle 中）放置一些交互式代码

【参考方案1】：

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

未捕获的 ReferenceError：未定义 takeScreenShot

所以我改变了一些东西，似乎可以工作。

我为你的按钮添加了一个 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

【讨论】：

这行得通，谢谢！但是，如果我想通过单击不同的按钮将图像附加到 div，然后拍摄 div“装备”的快照，那么即使其中有图像，“装备”内的 div 也会变成空的。

图片在同一个服务器吗？ github.com/niklasvh/html2canvas/issues/722

它们不是，这就是为什么我在 jquery 中传入选项 allowTaint 并将其设置为 true ，但随后快照甚至没有出现，但我也没有收到任何错误.这是带有“allowTaint”的更新的jsfiddle-也许我的语法错误？ jsfiddle.net/e51yepcz/3

this 可能会有所帮助:)