Search code examples
phplaravelpdfdompdf

Why is my generated QR code distorted when displaying it in a PDF with dompdf in laravel?

I am trying to display a generated QR code inside my generated PDF but for some reason it's really distorted. Even when I specify the dimensions inside the element or as a class with CSS it does not match those dimensions.

My entire PDF page:

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Kaart</title>
        <style>
            body{
                margin: 0;
                white-space: nowrap;
            }
            .card{
                border:1px solid black;
                height: 1102px;
                position: relative;
                width: 1575px;
            }

            .card .left{
                width: 50%;
                border-right: 1px solid black;
                height: 100%;
                position: relative;
                display: inline-block;
            }

            .card .right{
                width: 50%;
                height: 100%;
                position: relative;
                display: inline-block;
            }

            .card .right .text{
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                white-space: normal;
                width: 80%;
            }

            .card .left img{
                width: 100%;
                height: 100%;
            }

            .text .top{
                font-size: 50px;
            }

            .text .bottom{
                font-size: 30px;
            }

        </style>
    </head>
    <body>
    @foreach($cards as $key => $card)
        <div class="card">
            <div class="left">
                <img src="{{ $card['card_image'] }}">
            </div>
            <div class="right">
                <div class="text">
                    <div class="top">
                        <p>{!! nl2br($card['message']) !!}</p>
                    </div>
                    <div class="bottom">
                        <p>Scan de QR-code of ga naar {{ $card['donate_url'] }} om te doneren aan een goed doel naar keuze.</p>
                        <div class="qr-wrap">
                            <img class="qr" src="data:image/png;base64,{{ base64_encode($card['qr_code']) }}" />
                        </div>
                        <p>Waarde: <b>{{ $card['wallet_amount'] }}</b></p>
                    </div>
                </div>
            </div>
        </div>
        @if(($key + 1) !== $total)
            <div class="page-break"></div>
        @endif
    @endforeach
    </body>
</html>

In my controller I specify the qr data as: 'qr_code' => QrCode::size(300)->generate(route('donate', ['hash' => $hash], true)),

And then load the view like this:

$customPaper = array(0,0,626.50,1181.25);
$file = $pdf->loadView('admin.order.card', $data)->setPaper($customPaper, 'landscape')->setOptions(['dpi' => '200']);

I've tried directly generating the QR inside the blade file but this has the same effect. Also I've tried to add width and height parameters directly in the image tag but no effect.

This is what it looks like:

enter image description here

I've also tried adding it inside a wrapper:

   .qr-wrap{
                position: relative;
                width: 300px;
                height: 300px;
            }
            .qr{
                height: 100%;
                width: 100%;
                /*width: 3000px;*/
                /*height: 100px;*/
            }
Solution

  • What QR Code generator do you use? Maybe there is an second size option?

    This works for me:

    <img alt="QR Code" src="data:image/png;base64, {!!
      base64_encode(\SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')
      ->size(60)->generate($qr_code)) !!} ">

    Also you could try to set background-colors. It helps to debug the different HTML elements.