有人说这个错误是在使用html2canvas 1.0时发生的，但在0.4版本的中没有发生
下面是我的laravel刀片代码
<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)) }}
| {{CarbonCarbon::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>
下面是我的javascript代码
<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>
当我检查元素时，它创建了：(就在生日邀请div之后(
<canvas width="1349" height="657" style="width: 1349px; height: 657px;"></canvas>
我认为如果我可以用画布包裹div而不是在它后面附加，这将是固定的，但如何实现呢？谢谢
找到了一个替代方案并解决了这个问题，因为之前的尝试结果是下载的图像为白色，右侧只有一条垂直线，不知道为什么选择div不起作用，所以解决方法是下载整个<body>并删除不需要的元素。
<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>