网站在线截图

Question

我在Cage Scheduler中添加了一个功能，如果你点击第二场比赛的网格按钮，你可以拖放场上的球员，以组成球队。我希望这些信息可以在玩家之间共享。所以如果我组两个队，我想和另一个玩家分享，以听听他的想法。

音高的html为：

<a href="#secondPopup" onclick="fill_players(2)" data-rel="popup" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true" class="ui-link ui-btn ui-btn-b ui-icon-grid ui-btn-icon-notext ui-btn-inline ui-shadow ui-corner-all" data-transition="pop" role="button"><p>Basic Popup</p></a>
<div data-role="popup" id="secondPopup">
  <div id="footballField"></div>
  <div id="secondGrid"></div>
 </div>

其中 secondGrid 充满了这种风格的球员：

<div class="dragNdrop ui-draggable ui-draggable-handle" style="position: relative;">
  <span>Spiropoulos </span>
  <span><img class="alignPic" src="img/rb.jpg"></span>
</div>

出于这个目的，我认为最理想的是截屏（如果您有任何其他好的选择，请告诉我）。如果它是整个屏幕截图（我的意思是整个屏幕），而不是玩家的实际领域，那还不错。所以，在检查这个question之后，我写了这段代码，用于测试目的，在一个新的空项目:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>test2</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
        <script type="text/javascript" src="html2canvas.js"></script>
    </head>
    <body>
        <p>
            Hello world!
        </p>
        <img src="http://www.conti-online.com/generator/www/de/en/continental/contisoccerworld/themes/00_fifa_wm_2010/55_dfb_stars/img/dfb_2002_03_en,property=original.jpg" alt="Smiley face" height="42" width="42">

        <script>
            html2canvas(document.body, {
                logging:true,
                onrendered : function(canvas) {
                    document.body.appendChild(canvas);
                }
            });
        </script>

    </body>
</html>

但是，这将只考虑文本而不考虑图像。但是，我无法用 JSFiddle 重现它。如何达到我的目的？

Answer 1

有一个名为 html2canvas 的项目试图复制 HTML/CSS 并将其绘制在 canvas 元素中。

查看此处的示例：http://html2canvas.hertzen.com/examples.html

呈现 canvas 后，您可以使用 canvas.toDataURL() 检索图像的 base64 数据。

Answer 2

尝试在 html2canvas 初始化中使用 logging 选项：

例如：

html2canvas(document.body, {
    useCORS:true,
    logging:true,
    onrendered : function(canvas) {
        document.body.appendChild(canvas);
    }
});

Make sure All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy.

参考documentation.

网站在线截图

Screenshot of site online

html

javascript

canvas

html5-canvas

html2canvas