take a screenshot of the current screen and save it as a png image through php

Question

Hello all I have an requirement that clients needs screenshot of current webpage when he clicks a button "sceencapture" Although i googled for it result come out in this way

$im = imagegrabscreen();
imagepng($im, "myscreenshot.png");
imagedestroy($im);

in the manual on php.net link here having a note :This function is only available on Windows. please help ..

Where is the PHP being run? If it's on a remote server then it will be trying to capture the screen of the server it's being run on. You'd need to run this locally (on windows). Here are some more details: http://stackoverflow.com/questions/631449/getting-imagegrabscreen-to-work — Joe, Jun 19 '13 at 11:45
@RajeevRanjan - well then this method isn't possible. Try Erik's solution below. — Joe, Jun 19 '13 at 11:48
I don't know what the exact requirements are but you might want to check out: CutyCapt a commandline tool which can 'capture WebKit's rendering of a web page' - http://cutycapt.sourceforge.net/ — bob, Jun 19 '13 at 12:08

score 7 · Answer 1 · answered Jun 19 '13 at 11:43

7

This is not possible using PHP, as PHP executes on the server and a screenshot by definition must be done on the client. You could take a screenshot on the client side using client-side technology like the html2canvas library. Then you could send the screenshot to your server side PHP code if you wanted to.

answered Jun 19 '13 at 11:43

Erik Schierboom

16,301
10
64
81

1

I don't know just downvoted and why. This is exactly how you can do the task. I was just about to make the same answer +1 – tftd Jun 19 '13 at 11:44
anyway @Erik Schierboom i will give a try to it. – Rajeev Ranjan Jun 19 '13 at 11:51
it is said that it should work ie9+ in the documentation what about ie7 and ie8 have you used in your projects. – Rajeev Ranjan Jun 19 '13 at 11:58
canvas are only supported ie9+, therefore it won't work with ie8-. http://en.wikipedia.org/wiki/Canvas_element#Support – bob Jun 19 '13 at 12:26
In my opinion, you shouldn't worry about IE < 9. Even google refuses to support older versions. http://support.google.com/a/bin/answer.py?hl=en&answer=33864 – tftd Jun 19 '13 at 12:47

score 3 · Answer 2 · answered Jun 19 '13 at 13:21

Although @Erix Schierboom answered the question I felt like sharing some code.

This cannot be done with php alone. You will need javascript to take the screenshot, convert it into a string and send it via ajax to a php script which would then save the content.

To do that you can use this library http://html2canvas.hertzen.com/. Now the magic happens in the next few lines of code:

// an example html page
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="./javascripts/html2canvas.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#screenshot').on('click', function(e){
                e.preventDefault();
                html2canvas($('body'), {
                    onrendered: function(canvas){
                        var imgString = canvas.toDataURL();
                        window.open(imgString);
                        $.ajax({
                            url: '',
                            type: 'POST',
                            data: {
                                file: imgString
                            },
                            success: function(response){
                                //alert('Everything works fine.');
                            },
                            error: function(response){
                                //alert('Server response error.');
                            }
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>

<div style="width: 800px; margin: auto;">
    <input type="button" id="screenshot" value="Screenshot!"/>
    <div style="height: 100px;border: 1px solid #D8D8D8;">
        Big header!
    </div>
    <div style="height: 500px;border: 1px solid #D8D8D8;">
        Medium Content
    </div>
</div>

</body>
</html>



// Your php side script
<?php
if($_POST['file'] != "") {
    header('Content-Type: application/json');
    $file = base64_decode(str_replace('data:image/png;base64,','',$_POST['file']));
    $im = imageCreateFromString($file);
    if($im){
        $save = imagepng($im, '/path/to/the/new/file.png');
        echo json_encode(array('file' => true));
    }
    else {
        echo json_encode(array('error' => 'Could not parse image string.'));
    }
    exit();
}

?>

As far as the IE 7 & 8 support goes - google (and other giant web sites) have stated to support up to 1 version back from the latest. So, if the current version is 10, they will only support 9 and 10. I believe this is a good practice and I'm using it with my clients as well. IE < 8 is a big pain in the ... to be working with if you're developing advanced web pages. If your client still insists having IE 7 & 8 support, you may want to checkout Modernizr and html5shiv which may be able to help you bring the html5 support to IE.

take a screenshot of the current screen and save it as a png image through php

2 Answers2

Linked