0

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;
}
?>
2
Contributors
7
Replies
17
Views
1 Year
Discussion Span
Last Post by rproffitt
0

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

0

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.

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.