网站在线截图

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>

为此，我认为这样的屏幕截图将是理想的（如果您还有其他不错的选择，请告诉我）。 如果是整个屏幕截图（我是指整个屏幕），而不是播放器的实际区域，那还不错。 因此，检查完这个问题后，我在一个新的空项目中编写了此代码， 以进行测试 ：

<!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初始化中的logging选项：

例如：

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

确保脚本使用的所有图像都必须位于同一原点，这样它才能在无需代理协助的情况下读取它们。

请参阅文档。

Answer 2

有一个名为html2canvas的项目，该项目尝试再现HTML / CSS并将其绘制在canvas元素内。

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

渲染画布后，可以使用canvas.toDataURL()检索图像的base64数据。

网站在线截图

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-20 13:34:56

解决方案2
0 2015-09-20 13:21:40

网站在线截图

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-20 13:34:56

解决方案2 0 2015-09-20 13:21:40

解决方案1
1 已采纳 2015-09-20 13:34:56

解决方案2
0 2015-09-20 13:21:40