bugfix> javascript > 投稿

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

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

あなたの答え