How to capture screenshot of current page in php?

Question

How can I capture snapshot webpage which is currently in my tab. Please help me, I'm beginner

What exactly do you want and why can't you use the print screen button on your computer? — Salman A, Oct 21 '14 at 10:52
I want to capture a snapshot of a screen after user click a button — Muzammil Ahmed, Oct 21 '14 at 10:56
This just is not possible. PHP runs on your server, generates the page, sends it to your browser AND IS FINISHED. Anything after this is client side. There is Javascript, but no PHP anymore. — ToBe, Oct 21 '14 at 11:01
After clicking a button , current web page will be downloaded as a snapshot of a screen. — Muzammil Ahmed, Oct 21 '14 at 11:08
http://php.net/manual/en/function.imagegrabscreen.php From this source, it's creating blank image — Muzammil Ahmed, Oct 21 '14 at 11:09

score 3 · Accepted Answer · edited May 23 '17 at 11:49

Can't comment yet, so I'll post an answer.

A lot depends on what you're trying to do and the system you're using.

imagegrabscreen() & imagegrabwindow() are only available on Windows & PHP 5 >= 5.2.2. If you're getting a blank image with these, you need to configure Apache to 'Allow service to interact with desktop'. Go to Windows Services, find Apache and set that in the Properties.

You could use html2canvas + JavaScript on client side to post the webpage image + PHP on server side to save that image. Here's a Tutorial to do this.

There's also a good discussion of options (some a bit dated now) in this SO question Website screenshots using PHP

Plus, there are plenty free services that provide website screenshot capabilities with a PHP API, like GrabzIt, Websnapr, et al.

score 0 · Answer 2 · answered Jul 19 '19 at 12:37

You can try out this code to generate image on the client side, If you are using Juqery then it will be super easy to implement this feature in your application.

Here is the code you can try this out.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>WEB Page to Image Conversion</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>
        <p style="color: #3e4b51;">
            <b>Here </b> is the example of image of text and html page that we are going to use to convert it into the image that you will be able to download and preview here. </p>
        <p style="color: #3e4b51;">
            <b>This html2canvas</b> script allows you to take "screenshots" of webpages containing anything it it., directly on the users browser. It will just capture the html and css that it will find in the DOM.
        </p>
    </div>
    <input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-To-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>


<script>
$(document).ready(function(){


var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });

});

</script>
</body>
</html>

How to capture screenshot of current page in php?

2 Answers2