2016-02-18 1 views
0

Я пытаюсь создать скриншот, используя javascript элемента div, который содержит встроенный swf. Этот снимок экрана должен быть сохранен на моем FTP-сервере.Сохранить скриншот div на мой ftp, используя Javascript/JQuery

HTML, это выглядит следующим образом:

<div class="thumbnail" id="thumbnail"> 
    <div style="background: #FFF url('assets/images/canvas.png') repeat;" id="builder" class="thumb"> 
     <object> 
      <embed width="100%" height="350" src="http://assets.zwinky.com/assets3/avatar/avatar10.8.swf?u=dane" wmode="transparent"></embed> 
      <param name="wmode" value="transparent"> 
     </object> 
    </div> 
</div> 

И мой текущий Javascript действительно выглядит следующим образом:

<script type="text/javascript" src="assets/js/FileSaver.js"></script> 
<script type="text/javascript" src="assets/js/html2canvas.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#submit_form").click(function() { 
      html2canvas($("#thumbnail"), { 
       onrendered: function(canvas) { 
        theCanvas = canvas; 
        document.body.appendChild(canvas); 

        canvas.toBlob(function(blob) { 
         saveAs(blob, "test.png"); 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 

Но, к сожалению, ничто не спасет или произойдет, когда я нажав на кнопку ,

Пример рабочего кода: http://jsfiddle.net/6FZkk/1/

Скриншот HTML элемента, содержащего встраивании: https://gyazo.com/37683328b5a785e6b17f78eca5e1c2de


Кто-нибудь есть идея, что им делать неправильно?

+0

Я не уверен, как работает библиотека, но вы можете попробовать поместить CSS-код в файл CSS вместо тега стиля. Возможно, что библиотека перезагружает CSS и игнорирует тег стиля. –

+0

Возможный дубликат [Использование HTML5/Canvas/JavaScript для снятия скриншотов] (http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – GottZ

ответ

1

Из-за ограничений безопасности браузер не позволит вам сделать это на веб-странице. В противном случае вы можете сделать что-то вроде проверки ссылок, которые посетил пользователь, что позволит обнаружить историю браузера пользователя.

С другой стороны, если ваш кодирования расширение хром, вы можете проверить tabCapturehttps://developer.chrome.com/extensions/tabs#method-captureVisibleTab

И вспышка позволит вам сделать это, как хорошо, но я не знаком.

Если вы хотите сделать это для целей тестирования, проверки Phantom CSS https://github.com/Huddle/PhantomCSS

+0

хорошо есть html2canvas, но meh. Это просто обходной путь, который не будет работать с кадрами и объектами. в целом я полностью согласен с тобой. однако .. этот вопрос на самом деле является dublicate – GottZ

-2

Вы не должны делать это только с JS, потому что в этом случае ваш FTP учетные данные будут открыты для публики.

Для этого позвольте создать страницу, такую ​​как upload_to_ftp.ext и т. Д. На сервере, который примет ваш файл и будет загружен на ваш ftp. И после получения снимка экрана в браузере отправьте этот файл (скриншот) на ваш сервер (upload_to_ftp.ext).

+0

http://xyproblem.info/, вы пытаетесь решить проблему, которая требует успешного создания скриншота, что почти невозможно в первую очередь. исходный вопрос здесь действительно должен быть разделен на два вопроса. – GottZ

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