网站在线

时间：2015-09-20 12:56:24

标签： javascript html5 canvas html5-canvas html2canvas

我在Cage Scheduler中添加了一项功能，如果您在第二场比赛中点击网格按钮，则可以在该字段中拖放玩家，以便组建团队。我希望这些信息可以在玩家之间分享。因此，如果我组建两个团队，我想与其他玩家分享，以便听取他对此的看法。

enter image description here

球场的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重现它。如何实现我的目的？

2 个答案:

答案 0 :(得分：1)

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

例如：

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

确保脚本使用的所有图像都需要位于相同的原点下，以便能够在没有代理帮助的情况下读取它们。

参考documentation。

答案 1 :(得分：0)

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

点击此处的示例：http://html2canvas.hertzen.com/examples.html

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

相关问题
最新问题