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

Posted 2023-05-08

【中文标题】html2canvas 下载图像仅返回带有白色和右行的 png 文件？

【英文标题】：html2canvas download images return png file with white and right line only?

【发布时间】：2021-02-19 00:48:45

【问题描述】：

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

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

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

我认为如果我可以用画布包裹 div 而不是在它之后附加它，那么它将被修复，但是如何实现呢？谢谢

【参考方案1】：

找到了一个替代方案并解决了这个问题，因为之前的尝试结果是下载的图像是空白的，右边只有一条垂直线，不知道为什么选择 div 不起作用，所以解决方法是下载整个@987654321 @ 并删除不需要的元素。

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