Search code examples
javascripthtmlcanvashtml5-canvashtml2canvas

Screenshot of site online

I added a feature in the Cage Scheduler, where if you click the grid button on the second match, you can drag and drop players in the field, in order to form the teams. I would like this information to be shareable among the players. So if I form two teams, I would like to share it with another player, in order to hear what he thinks about it.

enter image description here

The html of the pitch is:

<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>

where secondGrid gets full with players of that style:

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

For that purpose, I thought a screenshot of that would be ideal (if you have any other good alternative, let me know). It's not that bad if it a whole screenshot(I mean the whole screen), rather than the actual field with the players. So, after checking this question, I wrote this code, for testing purposes, in a new empty project:

<!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>

However, this will take into account only the text and not the image. However, I am not able to reproduce it with a JSFiddle. How to achieve my purpose?

Solution

  • Try with logging option in html2canvas initialization:

    For ex:

    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.

    Refer documentation.