I'm using html2canvas.js & jquery.plugin.html2canvas.js
to save generated receipt. Receipt have 985px height & 350px width.
But it is saving only 100px height of image

Need help to find problem AND/OR save receipt

<div class="confirmation-wrapper booking-summary" id="canvas">
    <div class="confirmation-content">
        <h4>Your Booking Information</h4>
    </div>

     <ul class="book-sum-list">
     <li></li><li></li>.... <!--All Booking Information-->
     </ul>

</div>
 <input type="button" id="btnSave" value="Save Receipt" />

javascript

<script src="js/html2canvas.js"></script> 
<script src="js/jquery.plugin.html2canvas.js"></script> 

<script>
jQuery("#btnSave").click(function() {
    html2canvas([document.getElementById('canvas')], {
        onrendered: function(canvas) {

           var data = canvas.toDataURL('image/jpg');
            save_img(data);

        }
    })
});

function save_img(data) {
    $.post('CanvasSave.php', {
        data: data
    }, function(res) {
        if (res != '') {
            location.href = 'receipt/' + res + '';
            var a = document.createElement('a');
            a.href = 'receipt/' + res + '';
            a.download = res;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a)
        } else {
            alert('something wrong')
        }
    })
}
</script>

CanvasSave.php

<?php 
//just a random name for the image file
//$random = rand(100, 1000);
 $date = date ('d-m-Y_h-m-i').time();   
 $random = rand(0,1000);
 $name = 'receipt_'.$date.$random.'.jpg';
//$_POST[data][1] has the base64 encrypted binary codes. 
//convert the binary to image using file_put_contents
$savefile = @file_put_contents("receipt/$name", base64_decode(explode(",", $_POST['data'])[1]));
//if the file saved properly, print the file name
if($savefile){
    echo $name;
}
?>

Share a web site with that code so I can check something.

okay I will share link. It's now on localhost, lot of work is remaining.

Here's what I would test. When the receipt is on screen, do a right click on the image and check its properties.
Also, use a snipping tool to copy it, save it and check its properties.

Still there is problem with generating receipt.

here is the link ANJANEY AGRO TOURS

In, booking section I'm generating receipt.

Please help!!!

Clicked around and can't see a receipt to check on this for you.

I'm on travel for a few days, just post a link to a receipt so I can take a look.

You can try sample booking from available packages, so you can understand the working of forms & javascript used for forms. It's onepage site, so, I think javascript is the problem.

When you make booking it generates receipt, stores on server & download copy for client to submit at check-in.

Here, I created sample booking, - sample receipt

Please try booking from packages, when receipt is generated it's just displayed, in the form of HTML, before processing. When you click on save receipt, it proceeds further with converting & downloading.

Thanks for visiting site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.