Monday, 18 November 2013

How to take a screenshot of the current screen of web page and save it as a png image through php

// an example html page
<!DOCTYPE html>
    <script type="text/javascript" src="//"></script>
    <script type="text/javascript" src="./javascripts/html2canvas.js"></script>
    <script type="text/javascript">
            $('#screenshot').on('click', function(e){
                html2canvas($('body'), {
                    onrendered: function(canvas){
                        var imgString = canvas.toDataURL();
                            url: '',
                            type: 'POST',
                            data: {
                                file: imgString
                            success: function(response){
                                //alert('Everything works fine.');
                            error: function(response){
                                //alert('Server response error.');

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


// Your php side script
if($_POST['file'] != "") {
    header('Content-Type: application/json');
    $file = base64_decode(str_replace('data:image/png;base64,','',$_POST['file']));
    $im = imageCreateFromString($file);
        $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.'));

Read More