Search code examples
javascriptjqueryhtml2canvas

html2canvas screenshot of external website

I don't have even any idea how to do this and the documentation of html2canvas is not really helpful at this part.

I'm able to make a screenshot of my html with this little piece of code:

target = $('#myDiv');
        html2canvas( target, {
        onrendered: function( canvas ) {
            /* canvas is the actual canvas element, 
               to append it to the page call for example 
             */
               document.body.appendChild( canvas );
            }
        })

but i want to be able to pass an url and make a screenshot of this page. Like they do in their example page on: http://html2canvas.hertzen.com/screenshots.html

If anyone could give me a hint how to get started with that, I would be really glad.

Solution

  • You can't, for security reasons, load just any external URL. That's why, as they described on the page you linked to, you need to set up a separate server-side script that fetches the page. You then use that script, either directly or via AJAX, to provide the input for html2canvas.