html2canvas 下载图像 return png 文件只有白色和右线？

Question

有人说这个bug是在使用html2canvas 1.0的时候出现的，但是在0.4版本中没有出现

下面是我的laravelblade代码

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

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

当我检查元素时，它创建了：（就在 birthday-invitation div 之后）

<canvas width="1349" height="657" style="width: 1349px; height: 657px;"></canvas>

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

Answer 1

找到了替代方案并解决了这个问题，因为之前的尝试结果下载的图片是空白的，右边只有一条竖线，不知道为什么选择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>

html2canvas 下载图像 return png 文件只有白色和右线？

html2canvas download images return png file with white and right line only?

javascript

css

jquery

image

html2canvas