2015-09-20 2 views
1

Я добавил функцию в 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. Как достичь моей цели?

+0

Непонятно, как вы собираетесь делиться данными с другими игроками. Вы можете отправить координаты, где вы разместили игроков, а затем использовать движок игры, чтобы отобразить для вас поле. Но это зависит от того, как вы собираетесь делиться ... –

+0

Я думал, что у меня может быть кнопка @LeeTaylor, которая создаст скриншот и загрузит его. Затем игрок может поделиться загруженным изображением с кем угодно. – gsamaras

+0

@gsamaras, Попробуйте использовать относительные пути для изображений. 'html2canvas' не может рисовать изображение в' canvas' из другого домена .. [cross-domain-images-tainted-canvas] (https://blog.codepen.io/2013/10/08/cross-domain-images- tainted-canvas /) может помочь .. – Rayon

ответ

1

Попробуйте с logging опцией в html2canvas инициализации:

Для Ex:

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

Убедитесь, что все изображения, которые скрипт использует должны находиться под тем же происхождения для того, чтобы иметь возможность читать их без помощи прокси.

Refer documentation.

0

Существует проект под названием html2canvas, который пытается воспроизвести HTML/CSS и нарисовать его внутри элемента холста.

Заканчивать примеры здесь: http://html2canvas.hertzen.com/examples.html

Имея свой холст визуализации, вы можете использовать canvas.toDataURL() для получения base64 данные изображения.

+2

OP с помощью этого libabry. Задайте вопрос .. – Rayon

+0

Endel благодарит за ответ, но это не помогло! :/ – gsamaras

+0

Если у вас возникли проблемы с CORS, вы можете написать простой прокси-скрипт в своем домене, например: 'http://yourdomain.com/proxy.php?url=http%3A%2F%2Funtrusted.com% 2Fimage.jpg' – Endel

Смежные вопросы