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;
}
?>