0

I'm trying to create a screenshot using javascript of a div element which contains a embed swf. This screenshot should be saved to my FTP server.

The html does look like the following:

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

And my current Javascript does look like the following:

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

But sadly nothing will save or happen once I'm clicking the button.

Example of working code: http://jsfiddle.net/6FZkk/1/

Screenshot of the HTML element containing the embed: https://gyazo.com/37683328b5a785e6b17f78eca5e1c2de

Does anyone have a idea what im doing wrong?

fmsf
  • 36,317
  • 49
  • 147
  • 195
itsd4n3
  • 1
  • 2
  • I am not sure how the library you are using works but can you try putting you CSS code in a CSS file instead of the style tag. I might be that the library reloads the CSS and ignores the style tag. – Patrick Aleman Feb 18 '16 at 12:50
  • Possible duplicate of [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) – GottZ Feb 18 '16 at 12:53

2 Answers2

1

Due to security restrictions the browser won't allow you to do this on a webpage. Otherwise you could do stuff like checking which links a user had visited which would allow to detect the browser history of a user.

On the other hand if your coding a chrome extension you can check tabCapture https://developer.chrome.com/extensions/tabs#method-captureVisibleTab

And flash should allow you to do this as well, but I am not familiar.

If you want to do this for testing purposes, check Phantom CSS https://github.com/Huddle/PhantomCSS

fmsf
  • 36,317
  • 49
  • 147
  • 195
  • well there is html2canvas but meh.. thats just a workaround that will not work with frames and objects. all in all i totally agree with you. however.. this question actually is a dublicate – GottZ Feb 18 '16 at 12:51
-2

You should not do this only with js, because in this case your ftp credential will be open to public.

To do this, let you create a page like upload_to_ftp.ext, etc on the server which will accept your file and will upload to your ftp. And after getting the screenshot on the browser, send that file(screenshot) to your server(upload_to_ftp.ext).

Ahmad Asjad
  • 825
  • 1
  • 8
  • 29
  • http://xyproblem.info/ you are trying to solve a problem that requires to successfully create a screenshot wich is almost impossible in the first place. the original question here should actually be split into two questions. – GottZ Feb 18 '16 at 12:56