Screenshot of site online

Question

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.

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?

It's not clear how you intend to share the data with other players. You could send the coordinates of where you've placed the players and then use the game engine to render the pitch for you. But this depends on how you intend to share... — Lee Taylor, Sep 20 '15 at 13:03
I had thought that I could have a button @LeeTaylor, that would generate a screenshot and download it. Then the player can share the downloaded image with anyone. — gsamaras, Sep 20 '15 at 13:09
@gsamaras, Try using relative paths for images. `html2canvas` can not draw image in `canvas` from other domain..[cross-domain-images-tainted-canvas](https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/) may help.. — Rayon, Sep 20 '15 at 13:13
Hard to tell as we can't see the html for the pitch/players. As you've found html2canvas has limitations. I assume that you have access to the inner workings of the site (since it's yours), therefore you could just draw your pitch/players directly to a canvas and then send a jpeg of that — Lee Taylor, Sep 20 '15 at 13:13
@LeeTaylor I like the idea, I have added the HTML on my post! — gsamaras, Sep 20 '15 at 13:17
I really meant seeing the whole HTML, as there is obviously something that is throwing html2canvas... — Lee Taylor, Sep 20 '15 at 13:21
That's the whole HTML regarding the pitch and the players @LeeTaylor. Now I haven't included the html2canvas in the scheduler, I am just testing, I should update my question! — gsamaras, Sep 20 '15 at 13:23
ok, so perhaps you have some odd image references in the css which is causing html2canvas to fail? — Lee Taylor, Sep 20 '15 at 13:26
Try with `logging:true`, I got this `Image from origin 'http://www.conti-online.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource` error. — Rayon, Sep 20 '15 at 13:26
I tried with another image @RayonDabre and didn't got that in the console. Where do you want me to put `loggin:true`? But I fear, it's not the issue here. — gsamaras, Sep 20 '15 at 13:28
I have updated question for you. Image has to be under same domain. [This documentation](http://html2canvas.hertzen.com/documentation.html#limitations) may help.. — Rayon, Sep 20 '15 at 13:30

score 1 · Accepted Answer · edited Sep 20 '15 at 13:35

1

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.

edited Sep 20 '15 at 13:35

gsamaras

71,951
46
188
305

answered Sep 20 '15 at 13:34

Rayon

36,219
4
49
76

score 0 · Answer 2 · answered Sep 20 '15 at 13:21

0

There is a project called html2canvas which tries to reproduce HTML/CSS and draw it inside a canvas element.

Check out the examples here: http://html2canvas.hertzen.com/examples.html

Having your canvas rendered, you can use canvas.toDataURL() to retrieve the base64 data of the image.

answered Sep 20 '15 at 13:21

Endel Dreyer

1,644
18
27

Endel thanks for the answer, but this didn't help much! :/ – gsamaras Sep 20 '15 at 13:24
If you're having problems with CORS, you may write a simple proxy script in your domain, like: `http://yourdomain.com/proxy.php?url=http%3A%2F%2Funtrusted.com%2Fimage.jpg` – Endel Dreyer Sep 20 '15 at 13:37

Screenshot of site online

2 Answers2