Javascript html2canvas下载图像返回仅带白色和右行的png文件？

有人说这个bug是在使用HTML2Canvas1.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&nbsp;&nbsp;&nbsp;&nbsp;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>

加入我们


暂时


生日聚会


尊敬


{{$latestEvent->name}




{{date（'D'，strottime（$latestEvent->event_date））}
|{date（'dmy'，strottime（$latestEvent->event_date））}
|{{\Carbon\Carbon:：createFromFormat（'H:i:s'，$latestEvent->event_start）->format（'H:i'）}


{{$latestEvent->address}

下面是我的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>

函数myFunction（）
{
html2canvas（$（“#生日邀请”）.get（0））.then（函数（画布）{
$（“#生日邀请”）.append（画布）；
var myImage=canvas.toDataURL（“image/png”）；
console.log（myImage）；
窗口打开（myImage）；
var link=document.createElement（“a”）；
link.href=canvas.toDataURL（'image/png'）；
link.download='screenshot.png'；
link.click（）；
});
}

当我检查元素时，它创建了：（就在生日邀请div之后）

---

我想如果我可以用canvas包装div，而不是在它后面附加，那么它将会被修复，但是如何实现呢？谢谢

找到了一个替代方案并解决了这个问题，因为以前的尝试显示下载的图像为白色，并且右侧只有一条垂直线，不知道为什么选择div不起作用，所以解决方法是下载整个

并删除不需要的元素

<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>

//修正错误
//刷新一下
window.onload=函数（）
{
if（！window.location.hash）
{
window.location=window.location+“#已加载”；
window.location.reload（）；
}
}
document.getElementById（“myLink”）.addEventListener（“单击”，函数）（）
{
document.getElementById（“header”）.style.display='none'；
document.getElementById（“footer”）.style.display='none'；
document.getElementById（“标题部分”）.style.display='none'；
document.getElementById（“myLink”）.style.display='none'；
html2canvas（document.body）.then（函数（canvas）
{
saveAs（canvas.toDataURL（），'laces journal invitation.png'）；
});
});
函数saveAs（uri，文件名）{
var link=document.createElement（'a'）；
if（type of link.download=='string'）
{
link.href=uri；
link.download=文件名；
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
}
其他的
{
window.open（uri）；
}
//完成下载回家
window.location.href=“{{URL:：to（'/'）}”；
}

<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>