html2canvasダウンロード画像は白と右の線だけでpngファイルを返しますか？

bugfix> javascript > 投稿 2020-11-23 19:27

このバグは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>

以下は私の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をキャンバスでラップでき、その後に追加できない場合は修正されると思いますが、これを実現するにはどうすればよいですか？ありがとうございました

javascript

jquery

css

回答 1 件

代替案を見つけてこの問題を修正します。以前の試みでは、ダウンロードした画像が白く空白で、右側に縦線が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>

bugfix

html2canvasダウンロード画像は白と右の線だけでpngファイルを返しますか？

javascript

jquery

css

関連記事