PHP - generate a QR code inside a html table-CodePudding

I want to put a QR code inside a HTML table. I tried but I do not know how to fix it.

I think it is simple - just put php code that works in the <td></td>. The result shows a small table in the middle, but that is not the thing that I want. I want the QR code in the second row. In the first row I want to insert some text about my company.

<!DOCTYPE html>
<html>
<style>
table, th, td {
 border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
 <tr>
   <th>Company</th>
 </tr>
 <tr>
   <td>
   <?php
/**
* QR Code   Logo Generator
*
* http://labs.nticompassinc.com
*/
session_start(); 

$qrcodeinfo =$_SESSION['qrcodeinfo'];
$data = isset($_GET['data']) ? $_GET['data'] : "$qrcodeinfo";
$size = isset($_GET['size']) ? $_GET['size'] : '300x300';
$logo = isset($_GET['logo']) ? $_GET['logo'] : 'Thai_QR_Payment_Logo-03.png';

header('Content-type: image/png');
// Get QR Code image from Google Chart API
// http://code.google.com/apis/chart/infographics/docs/qr_codes.html
$QR = imagecreatefrompng('https://chart.googleapis.com/chart?cht=qr&chld=H|0&chs='.$size.'&chl='.urlencode($data));

if($logo !== FALSE){
   $logo = imagecreatefromstring(file_get_contents($logo));

   $QR_width = imagesx($QR);
   $QR_height = imagesy($QR);
   
   $logo_width = imagesx($logo);
   $logo_height = imagesy($logo);
   
   // Scale logo to fit in the QR Code
   $logo_qr_width = $QR_width/5;
   $scale = $logo_width/$logo_qr_width;
   $logo_qr_height = $logo_height/$scale;
   
   imagecopyresampled($QR, $logo, $QR_width/5, $QR_height/5, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height);
}
imagepng($QR);
imagedestroy($QR);
?>
   </td>
 </tr>
</table>

</body>
</html>

CodePudding user response：

You're combining two types of output (HTML, and raw image data) into one single stream of output, which won't work. Your code first outputs some HTML, but in the middle of it, you then switch to outputting raw image data. The browser will try to embed the raw data into the HTML document, but it won't see it as image data. Also you're changing the Content-Type header to an image format, but the overall output will not be a valid image (because it contains HTML text).

To put an image into a HTML document, as you probably know, you must use an <img> tag. This tag contains a URL in its src attribute where the browser can then - separately - download the image and display it in the location in the HTML document where the <img> tag is placed.

Therefore to achieve this, your HTML document should simply contain an <img> tag inside the <td>, whose src URL points to a second PHP script - this separate script will generate the image data and output it, and that image data will be received by the browser when it requests the src URL, and so can then be used by the browser to show the image in the correct location.

For example, something like this:

Main page:

<?php
//ensure any relevant GET parameters provided to the main page are passed on to the QR code script
$dataParams = isset($_GET['data']) ? "data=".$_GET['data'] : "");
$dataParams .= isset($_GET['size']) ? ($dataParams != "" ? "&" : "")."size=".$_GET['size'] : "");
$dataParams .= isset($_GET['logo']) ? ($dataParams != "" ? "&" : "")."logo=.$_GET['logo'] : "");
$qrURL = "generateqr.php?".$dataParams;
?>

<!DOCTYPE html>
<html>
<style>
table, th, td {
 border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
 <tr>
   <th>Company</th>
 </tr>
 <tr>
   <td>
     <img src="<?php echo $qrURL; ?>" alt="QR code" />
   </td>
 </tr>
</table>
</body>
</html>

generateqr.php

<?php
/**
* QR Code   Logo Generator
*
* http://labs.nticompassinc.com
*/
session_start(); 

$qrcodeinfo = $_SESSION['qrcodeinfo'];
$data = isset($_GET['data']) ? $_GET['data'] : "$qrcodeinfo";
$size = isset($_GET['size']) ? $_GET['size'] : '300x300';
$logo = isset($_GET['logo']) ? $_GET['logo'] : 'Thai_QR_Payment_Logo-03.png';

header('Content-type: image/png');
// Get QR Code image from Google Chart API
// http://code.google.com/apis/chart/infographics/docs/qr_codes.html
$QR = imagecreatefrompng('https://chart.googleapis.com/chart?cht=qr&chld=H|0&chs='.$size.'&chl='.urlencode($data));

if($logo !== FALSE){
   $logo = imagecreatefromstring(file_get_contents($logo));

   $QR_width = imagesx($QR);
   $QR_height = imagesy($QR);
   
   $logo_width = imagesx($logo);
   $logo_height = imagesy($logo);
   
   // Scale logo to fit in the QR Code
   $logo_qr_width = $QR_width/5;
   $scale = $logo_width/$logo_qr_width;
   $logo_qr_height = $logo_height/$scale;
   
   imagecopyresampled($QR, $logo, $QR_width/5, $QR_height/5, 0, 0, $logo_qr_width, $logo_qr_height, $logo_width, $logo_height);
}
imagepng($QR);
imagedestroy($QR);