How to Generate a Screenshot of a Webpage Using a Server-Side Script

How can I generate a screenshot of a webpage using a server-side script?

You can probably write something similar to webkit2png, unless your server already runs Mac OS X.

UPDATE: I just saw the link to its Linux equivalent: khtml2png

Take a screenshot of a webpage with JavaScript?

I have done this for an HTA by using an ActiveX control. It was pretty easy to build the control in VB6 to take the screenshot. I had to use the keybd_event API call because SendKeys can't do PrintScreen. Here's the code for that:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

That only gets you as far as getting the window to the clipboard.

Another option, if the window you want a screenshot of is an HTA would be to just use an XMLHTTPRequest to send the DOM nodes to the server, then create the screenshots server-side.

Server A need to make a screenshot of website B

conclusion:

This is not possible on shared hosting server with out a 3de part service

If you want to use PhantomJS or Webkit you need to have a VPS server or a server where you have root access to

how to take a screenshot of a loaded webpage using php?

PHP runs on server side, so to be able to take screenshots you need something to render HTML (a browser-like script) and generate a image of it. This script will do that (wkhtmltoimage too):

HTML2PS:
http://freecode.com/projects/html2ps_php

But I still think the best solution will be using javascript. Of course, only the client will have access to the screenshots, and maybe you can upload the image to the server. A client browser is better than any kind of server script.

If that is the case, I would suggest using HTML2CANVAS:

HTML2CANVAS: http://html2canvas.hertzen.com/

The best server solution will be a linux distribution with a google chrome installation and a local script to take screenshots. That is the only way to get accurate screenshots of a web page that may contain javacript/HTML5/animations and other difficult to render stuff.

Generate and Download Screenshot of webpage without lossing the styles

You can achieve this using the following JavaScript libraries ...

html2canvas ( for taking screenshot of webpage )
FileSave.js ( for downloading the screenshot as an image )

ᴅᴇᴍᴏ

(function(exports) {

    function urlsToAbsolute(nodeList) {

        if (!nodeList.length) {

            return [];

        }

        var attrName = 'href';

        if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {

            attrName = 'src';

        }

        nodeList = [].map.call(nodeList, function(el, i) {

            var attr = el.getAttribute(attrName);

            if (!attr) {

                return;

            }

            var absURL = /^(https?|data):/i.test(attr);

            if (absURL) {

                return el;

            } else {

                return el;

            }

        });

        return nodeList;

    }


    function screenshotPage() {

        var wrapper = document.getElementById('wrapper');

        html2canvas(wrapper, {

            onrendered: function(canvas) {

                canvas.toBlob(function(blob) {

                    saveAs(blob, 'myScreenshot.png');

                });

            }

        });

    }


    function addOnPageLoad_() {

        window.addEventListener('DOMContentLoaded', function(e) {

            var scrollX = document.documentElement.dataset.scrollX || 0;

            var scrollY = document.documentElement.dataset.scrollY || 0;

            window.scrollTo(scrollX, scrollY);

        });

    }


    function generate() {

        screenshotPage();

    }

    exports.screenshotPage = screenshotPage;

    exports.generate = generate;

})(window);

@import url(https://fonts.googleapis.com/css?family=Merriweather);

$red: #e74c3c;

*,

*:before,

*:after {

    @include box-sizing(border-box);

}


html,

body {

    background: #f1f1f1;

    font-family: 'Merriweather', sans-serif;

    padding: 1em;

}


h1 {

    text-align: center;

    color: #a8a8a8;

    @include text-shadow(1px 1px 0 rgba(white, 1));

}


form {

    border: 2px solid blue;

    margin: 20px auto;

    max-width: 600px;

    padding: 5px;

    text-align: center;

}


input,

textarea {

    border: 0;

    outline: 0;

    padding: 1em;

    @include border-radius(8px);

    display: block;

    width: 100%;

    margin-top: 1em;

    font-family: 'Merriweather', sans-serif;

    @include box-shadow(0 1px 1px rgba(black, 0.1));

    resize: none;

    &:focus {

        @include box-shadow(0 0px 2px rgba($red, 1)!important);

    }

}


#input-submit {

    color: white;

    background: $red;

    cursor: pointer;

    &:hover {

        @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));

    }

}


textarea {

    height: 126px;

}



}

.half {

    float: left;

    width: 48%;

    margin-bottom: 1em;

}

.right {

    width: 50%;

}

.left {

    margin-right: 2%;

}

@media (max-width: 480px) {

    .half {

        width: 100%;

        float: none;

        margin-bottom: 0;

    }

}


/* Clearfix */

.cf:before,

.cf:after {

    content: " ";

    /* 1 */

    

    display: table;

    /* 2 */

}

.cf:after {

    clear: both;

}

.half.left.cf > input {

    margin: 5px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="wrapper">

    <h1>Scrrenshot</h1>

    <form class="cf">

        <div class="half left cf">

            <input type="text" id="input-name" placeholder="Name">

            <input type="email" id="input-email" placeholder="Email address">

            <input type="text" id="input-subject" placeholder="Subject">

        </div>

        <div class="half right cf">

            <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>

        </div>

        <input type="submit" value="Submit" id="input-submit">

    </form>

</div>

<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

Is it possible to take a screenshot of the rendered DOM on the server side?

You can use WKHTMLTOPDF. It also has the functionality to save images called WKHTMLTOIMAGE (I think that's a different distribution, but you can download it from the same link). You can run it with exec() from PHP as a system call. Using a virtual buffer like xvfb you can run the WKHTMLTOIMAGE headless on the server. It is WebKit based so the results produced are really good...

You can scale the resulting image with standard PHP functions like described for example in these posts:

dynamically scale images in php jpg/png/gif
Resize image using PHP if it's too small

You might want to check my answer to this question HTML2PDF in PHP - convert utilities & scripts - examples & demos, maybe it helps you too.