Some said that this bug is occured when using html2canvas 1.0 but this not occured in 0.4 version
below is my laravel blade code
<section id="birthday-invitation" class="preview birthday-inv text-center" style="background-image:url('{{asset($choosen_template_data->image_path)}}')">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="preview-invitation text-center">
<span class="invitation-text-area">
<p class="allegratta-font" style="font-size: 36px !important; color: brown !important;" >
Join Us
</p>
<p class="neuton-font-regular" style="font-size: 20px !important; color:brown !important;">
<i> for a </i>
</p>
<p class="neuton-font-bold" style="font-size: 32px !important; color:brown !important;">
BIRTHDAY PARTY
</p>
<p class="neuton-font-regular" style="font-size: 20px !important; color:brown !important;">
<i> honoring </i>
</p>
<p class="neuton-font-bold" style="font-size: 30px !important; color:brown !important;">
{{ $latestEvent->name }}
</p>
<br>
<p class="neuton-font-regular" style="font-size: 18px !important; color:brown !important;">
{{ date('D', strtotime($latestEvent->event_date)) }}
| {{ date('d M Y', strtotime($latestEvent->event_date)) }}
| {{\Carbon\Carbon::createFromFormat('H:i:s',$latestEvent->event_start)->format('H:i')}}
</p>
<p class="neuton-font-regular" style="font-size: 18px !important; color:brown !important;">
{{ $latestEvent->address }}
</p>
</span>
</div>
</div>
</div>
</div>
</section>
below is my javascript code
<script type="text/javascript" src="{{ asset('js/html2canvas.js') }}"></script>
<script language="javascript">
function myFunction()
{
html2canvas($('#birthday-invitation').get(0)).then( function (canvas) {
$("#birthday-invitation").append(canvas);
var myImage = canvas.toDataURL("image/png");
console.log(myImage);
window.open(myImage);
var link=document.createElement("a");
link.href=canvas.toDataURL('image/png');
link.download = 'screenshot.png';
link.click();
});
}
</script>
when I inspect element, it created: (just after the birthday-invitation div)
<canvas width="1349" height="657" style="width: 1349px; height: 657px;"></canvas>
I think it will be fixed if I can wrap the div with canvas not append the after it, but how to achieve this? thank you
Found an alternative and fix this problem, since earlier attempts turn out that the downloaded image blank white and has only one vertical line on the right, do not know why selecting div not working, so the workaround is download the entire <body> and remove unwanted elements.
<script type="text/javascript" src="{{ asset('js/html2canvas.js') }}"></script>
<script language="javascript">
// fix bug
// refresh just once
window.onload = function()
{
if(!window.location.hash)
{
window.location = window.location + '#loaded';
window.location.reload();
}
}
document.getElementById("myLink").addEventListener("click", function()
{
document.getElementById("header").style.display = 'none';
document.getElementById("footer").style.display = 'none';
document.getElementById("title-section").style.display = 'none';
document.getElementById("myLink").style.display = 'none';
html2canvas(document.body).then(function(canvas)
{
saveAs(canvas.toDataURL(), 'lacies-journal-invitation.png');
});
});
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string')
{
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else
{
window.open(uri);
}
// finish download go back to home
window.location.href = "{{URL::to('/')}}";
}
</script>