英文:
Why is my generated QR code distorted when displaying it in a PDF with dompdf in laravel?
问题
你尝试在生成的PDF中显示一个生成的QR码，但出现了失真问题。即使在元素内或使用CSS类指定尺寸，仍然无法匹配这些尺寸。
在控制器中，你将QR码数据指定为：
'qr_code' => QrCode::size(300)->generate(route('donate', ['hash' => $hash], true)),
然后像这样加载视图：
$customPaper = array(0,0,626.50,1181.25);
$file = $pdf->loadView('admin.order.card', $data)->setPaper($customPaper, 'landscape')->setOptions(['dpi' => '200']);
你尝试直接在Blade文件中生成QR码，但效果相同。另外，你尝试在图像标签中直接添加宽度和高度参数，但没有效果。
这是它的外观：
你还尝试将它放在一个包装器内：
.qr-wrap {
position: relative;
width: 300px;
height: 300px;
}
.qr {
height: 100%;
width: 100%;
/*width: 3000px;*/
/*height: 100px;*/
}
如果QR码失真，你可以尝试调整QR码的生成尺寸或检查生成QR码的库是否存在问题。另外，确保在生成PDF时没有对图像进行额外的缩放或变换。
英文:
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:
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;*/
}
答案1
得分: 2
I use the following QR Code generator:
我使用以下的QR码生成器：
<img alt="QR Code" src="data:image/png;base64, {!!
base64_encode(\SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')
->size(60)->generate($qr_code)) !!} ">
你也可以尝试设置背景颜色，这有助于调试不同的HTML元素。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论