How to use variable content as data for the qr generator? #284

CurvyLineo · 2024-10-22T15:20:24Z

CurvyLineo
Oct 22, 2024

So, i have list of php variables that contain information (name, surname, something like that) and i need the generator to use the content of those variables to generate a qr code.
So, is it possible to use the variables as content of $data? (as of now, i've only exercised with links as string content of $data, so I'm not really sure if what I'm asking is possible at all.

Answered by codemasher

Oct 23, 2024

Of course you can, but it's a good idea to use external CSS to style instead, see the authenticator example:

php-qrcode/examples/authenticator.php

Lines 75 to 122 in 99f17b6

     <!DOCTYPE html>  
   <html lang="en">  
   <head>  
   <meta charset="UTF-8"/>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
   <title>QRCode Authenticator Example</title>  
   <style>  
   #authenticator-qrcode{  
   width: 500px;  
   margin: 2em auto;  
   }  
   #secret{  
   box-sizing: border-box;  
   display: inline-block;  
   width: 100%;  
   font-size: 20px;  
   }  
    
   /* styles for the embedded SVG QR code */  
   .my-qrcode.qr-svg{  
   margin-bottom: 1em; 

View full answer

codemasher · 2024-10-22T16:29:21Z

codemasher
Oct 22, 2024
Maintainer

Hey, the QR generator has no concept of what the input or output data looks like - not even the character encoding. You have to make sure that the data you hand over can be processed by the receiving application; sprintf is your best friend here.

4 replies

CurvyLineo Oct 23, 2024
Author

Sorry for the late answer, i'll try to explain myself better.
What I'm trying to achieve is a qrcode that has the content of a variable as its data, something like;
$qrcode = (new QRCode($options))->render($voucherID);
the variable $voucherID contains $esitoInsert['voucherID'], which is the result of a data i take from my database. I am sure that the string is stored correctly inside of this variable.
Point is, when i generate the qr code i get the "broken image" png, meaning something went wrong. It feels weird that this isn't possible, so I'm trying to understand what could be wrong

codemasher Oct 23, 2024
Maintainer

If you get the broken image, just comment out the header() call in the example, this allows for the output to be printed in plaintext and you'll see the exception that was thrown.

php-qrcode/examples/image.php

Line 68 in 99f17b6

header('Content-type: image/png');

CurvyLineo Oct 23, 2024
Author

Oh and also, once I get this:
printf('<img src="%s" alt="QR Code" />', $qrcode);
can i style it inside with normal css rules? can it do something like printf('<img src="%s" alt="QR Code" style="allMyRules"/>', $qrcode); ?

codemasher Oct 23, 2024
Maintainer

Of course you can, but it's a good idea to use external CSS to style instead, see the authenticator example:

php-qrcode/examples/authenticator.php

Lines 75 to 122 in 99f17b6

    
           <!DOCTYPE html> 
        
           <html lang="en"> 
        
           <head> 
        
           	<meta charset="UTF-8"/> 
        
           	<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        
           	<title>QRCode Authenticator Example</title> 
        
           	<style> 
        
           		#authenticator-qrcode{ 
        
           			width: 500px; 
        
           			margin: 2em auto; 
        
           		} 
        
           		#secret{ 
        
           			box-sizing: border-box; 
        
           			display: inline-block; 
        
           			width: 100%; 
        
           			font-size: 20px; 
        
           		} 
        
           		/* styles for the embedded SVG QR code */ 
        
           		.my-qrcode.qr-svg{ 
        
           			margin-bottom: 1em; 
        
           			background: #eee; /* example for https://github.com/chillerlan/php-qrcode/discussions/199 */ 
        
           		} 
        
           		.my-qrcode.qr-data-dark{ 
        
           			fill: url(#gradient); /* the gradient defined in the SVG defs */ 
        
           		} 
        
           		.my-qrcode > defs > #gradient > #stop1{ 
        
           			stop-color: #D70071; 
        
           		} 
        
           		.my-qrcode > defs > #gradient > #stop2{ 
        
           			stop-color: #9C4E97; 
        
           		} 
        
           		.my-qrcode > defs > #gradient > #stop3{ 
        
           			stop-color: #0035A9; 
        
           		} 
        
           	</style> 
        
           </head> 
        
           <body> 
        
           <div id="authenticator-qrcode"> 
        
           	<!-- embed the SVG directly --> 
        
           	<?php echo $svg ?> 
        
           	<!-- the input that holds the authenticator secret --> 
        
           	<input value="<?php echo $secret; ?>" id="secret" type="text" readonly="readonly" onclick="this.select();" /> 
        
           	<label for="secret">secret</label> 
        
           </div> 
        
           </body> 
        
           </html>

Answer selected by CurvyLineo

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use variable content as data for the qr generator? #284

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>QRCode Authenticator Example</title>
	<style>
	#authenticator-qrcode{
	width: 500px;
	margin: 2em auto;
	}
	#secret{
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	font-size: 20px;
	}

	/* styles for the embedded SVG QR code */
	.my-qrcode.qr-svg{
	margin-bottom: 1em;

How to use variable content as data for the qr generator? #284

CurvyLineo Oct 22, 2024

Replies: 1 comment · 4 replies

codemasher Oct 22, 2024 Maintainer

CurvyLineo Oct 23, 2024 Author

codemasher Oct 23, 2024 Maintainer

CurvyLineo Oct 23, 2024 Author

codemasher Oct 23, 2024 Maintainer

CurvyLineo
Oct 22, 2024

Replies: 1 comment 4 replies

codemasher
Oct 22, 2024
Maintainer

CurvyLineo Oct 23, 2024
Author

codemasher Oct 23, 2024
Maintainer

CurvyLineo Oct 23, 2024
Author

codemasher Oct 23, 2024
Maintainer