Take Screenshot of container in browser page

Question

When user clicks on "Save" button, I am taking a screenshot of browser page and saving that screenshot in server with help of this link.... it's working fine.

Requirement :

Here I want to save only the Content present inside div. So I am displaying some paragraph in Div & taking a screenshot of that div only...

Issue :

But along with content, its displaying white space in the screenshot.

Below is Screenshot saved in server :

Html :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/html2canvas.js"></script>
<script type="text/javascript" src="http://139.59.24.243/ecom1/site/test/screen/screenshot/js/jquery.plugin.html2canvas.js"></script>

<div id="target"> 
<p class="paragraph">some text
</p>
</div>  

<input class="save" type="submit" value="save" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
   <input type="hidden" name="img_val" id="img_val" value="" />
</form>

<style>

.save {
    font-size: 20px;
}

.paragraph {    
    font-size: 25px;
}   

</style>

<script>      

function capture() {
    $('#target').html2canvas({
        onrendered: function(canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));           
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}

</script>

Save.php

<?php

//Show the image
echo '<img src="'.$_POST['img_val'].'" />';

//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('/images/image.png', $unencodedData);
?>

Edit

When i include the div in table, then that extra whitespace will not display , but is there any other way so that without using table, can i remove that whitespace ?

<table>
   <tr>
      <td>
         <div id="target">
            <p>some text</p>
         </div>
      </td>
   </tr>
</table>

Answer 1

You will need to set the size for the target element here. before capturing the image.

you could detect which page you are on, then set the sizes from a predetermined list of possible sizes.

this is due to the capture is converting the #target element to canvas.

but if you have multiple settings/ pages then add a switch with some page casing.

function capture() {
    $('#target').html2canvas({
        onrendered: function(canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));            

            //Example with pages
            let page = 1; //Page 1? (detect which page you are on then set the value here
            switch(page){
                case 1:
                    // Set Width and Height here.
                    $('#target').css('width', '200px');
                    $('#target').css('height', '200px');
                break;
                case 2:
                    // Set Width and Height here.
                    $('#target').css('width', '450px');
                    $('#target').css('height', '900px');
                break;
                case 3:
                    // Set Width and Height here.
                    $('#target').css('width', '250px');
                    $('#target').css('height', '480px');
                break;
                /* etc etc*/
            }
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}