How to send a JS created qrcode in an email with PHPMailer

Question

I have encoutenered a road block with my code. I was following some tutorials, I managed to separatly create an qr code generator with QRCode.js (it takes PersonID from the server, a forwards it as data for the generator). However, as I intend to send the generated qr code to the receiver through PHPMailer library, I don't know how to transfer the created qr code image to the PHPMailer's body or addAttachment. Perhaps someone has any ideas and can help me with that?

This is code that is getting the PersonID from the server

$select = "SELECT PersonID FROM Users WHERE FirstName='$FirstName' AND LastName='$LastName' AND Email='$Email'";
        $query = mysqli_query($db, $select);
      
      
        if(mysqli_num_rows($query) > 0){
          $row = mysqli_fetch_assoc($query);
          $personID = $row['PersonID'];
        }

This is JS code qr generator

<script>
  var personID = <?php echo $personID; ?>;
  var QRImage = document.getElementById("QRImage");
  var NewImage = new QRCode(QRImage, {
    width: 200,
    height: 200
  });
  
  function generateAndSubmit() {
    var data = personID.value;
    // Generate the QR code
    NewImage.makeCode(data);
    
    // Store the QR code value in the hidden input field
    var qrCodeValueInput = document.getElementById("qrCodeValue");
    qrCodeValueInput.value = QRImage.toDataURL();
  }
</script>

And this is PHPMailer email form

    $mail->Subject = "Registration confrirmation";
    $mail->Body = '<p>Thank you for registering!</p>
        <li>First Name: '.$FirstName.'</li>
        <li>Last Name: '.$LastName.'</li>
        <li>Email: '.$Email.'</li>
        <li>Age: '.$Age.'</li>
        <li>Education: '.$Education.'</li>';
    $mail->addAttachment($qrCodeValueInput);

I tried everything, but due to my limited knowledge and general hate to ChatGPT (I just don't think that its the best tool that will do everything for me without me properly understanding how everything works) I have no results - email is not even sent to the receiver. In error log it states that the addAttachment function is faulty.

You should first of all tell us what library you are actually using there to create your QR code. — CBroe, Apr 04 '23 at 08:49
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Apr 04 '23 at 08:50
Also please can you show how you are passing the image back to PHP? — Rob Eyre, Apr 04 '23 at 08:50
The `addAttachment` method expects a file system path as parameter, the documentation is absolutely clear about that. It does not work with HTTP URLs - and not with Data URIs either. But `addStringAttachment` also exists. You will probably have to convert your Data URI back into just the binary image data first though. — CBroe, Apr 04 '23 at 08:54
@CBroe I am using QRCode.js (https://davidshimjs.github.io/qrcodejs/) — Ervin Borkovski, Apr 04 '23 at 09:01
@RobEyre Thats the problem - as I have mentioned before I don't really know how to do that, I just tried it to store in the qrCodeValueInput variable and use it in the PHP by itself — Ervin Borkovski, Apr 04 '23 at 09:03
So you're going to need some kind of AJAX call in JavaScript to pass the generated QR code back to the server for PHP to pick up. — Rob Eyre, Apr 04 '23 at 09:08
If you're using jQuery, then this: https://api.jquery.com/jquery.ajax/ — Rob Eyre, Apr 04 '23 at 09:09
Doesn't necessarily need AJAX, a hidden input field populated with the data from the Data URI generation process, could also be used to submit this value to the server. — CBroe, Apr 04 '23 at 09:11
Yes, that's true @CBroe. Then some PHP will be needed to respond to that call (AJAX or otherwise) — Rob Eyre, Apr 04 '23 at 09:11
@ErvinBorkovski var qrCodeValueInput and $qrCodeValueInput is two different thing you cannot declare a javascript variable and directly call it in php by just adding $ infront of it as you did you created a js variable inside script tag as var qrCodeValueInput = document.getElementById("qrCodeValue"); but you are calling a php variable for sending mail as $mail->addAttachment($qrCodeValueInput); you should assign the value of var qrCodeValueInput; to before using it — MrJukeman, Apr 04 '23 at 09:13
Since your PHPMailer code is run on the server in PHP, it makes sense to generate your QR there too; it's pretty inefficient to make it on the client and upload it. I recommend [`bacon/bacon-qr-code `](https://packagist.org/packages/bacon/bacon-qr-code) – feed it the same content string you want encoded and you'll get a local QR without all that tedious mucking about with Ajax. — Synchro, Apr 04 '23 at 09:14

score 0 · Answer 1 · answered Apr 04 '23 at 08:50

0

You need to render it

<li>Education: '.$Education.'</li>
<li>QR: <img src="'.$qrCodeValueInput.'" /></li>';

answered Apr 04 '23 at 08:50

mplungjan

169,008
28
173
236

score 0 · Answer 2 · answered Apr 04 '23 at 08:52

0

If you generate the QR Code in a Canvas-element, you can use the .toDataURL('image/png') to get the canvas as a PNG.

https://github.com/cheprasov/js-qrcode

Stackoverflow: Capture HTML canvas as GIF/JPG/PNG/PDF?

answered Apr 04 '23 at 08:52

Lars Munkholm

190
1
9

How to send a JS created qrcode in an email with PHPMailer

2 Answers2