Portrait images are rotated in PDF output

[Wrightie]

Hello, I am experimenting an odd issue :)
I'm creating a table with images; some of them are oriented in portait mode, some are in landscape.
This is the PHP code which generates the HTML:

  $myhtml = $myhtml . '<table border="0" style="width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;"><tbody>';
    $myhtml = $myhtml . '<tr style="height: 28px;">';
      $myhtml = $myhtml . '<td style="width: 100%; padding: 6px 8px; border-bottom: 2px solid black;" colspan="2"><b>ALLEGATI</b></td>';
    $myhtml = $myhtml . '</tr>';
  $myhtml = $myhtml . '</tbody></table>';
    $fotoid = 0;
    foreach ($qryfotovideo as $fotovideo) {
      $fotoid +=1;
      if ($fotoid % 2 == 1) {
        $myhtml = $myhtml . '<table border="0" style="width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;"><tbody>';
        $myhtml = $myhtml . '<tr>';
      }
      $myhtml = $myhtml . '<td style="width: 50%; text-align: center; padding: 6px 8px; border-bottom: 0.25px dashed black; font-size: 11px;">';
        if ($fotovideo["URL"] != "") {
          $fotoURL = $fotovideo["URL"];
          $myhtml = $myhtml . '<img style="display: block; margin-left: auto; margin-right: auto;" src="';
          $myhtml = $myhtml . $fotoURL . '" alt="" width="200" /><br><br>';
        }
        $myhtml = $myhtml . $fotovideo["DESCRIZIONE"];
        $myhtml = $myhtml . '</td>';
      if ($fotoid % 2 == 0) {
        $myhtml = $myhtml . '</tr>';
        $myhtml = $myhtml . '</tbody></table>';
      }
    }
    if ($fotoid % 2 == 1) {
      $myhtml = $myhtml . '<td></td>';
      $myhtml = $myhtml . '</tr>';
      $myhtml = $myhtml . '</tbody></table>';
    }

The resulting HTML is the following (note: it's an excerpt):

<table border="0" style="width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;">
  <tbody>
    <tr>
      <td style="width: 50%; text-align: center; padding: 6px 8px; border-bottom: 0.25px dashed black; font-size: 11px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="media/dmsf/2025/05/250511212135_10804_A08.JPG" alt="" width="200" /><br><br>250509 A08</td>
      <td style="width: 50%; text-align: center; padding: 6px 8px; border-bottom: 0.25px dashed black; font-size: 11px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="media/dmsf/2025/05/250511212135_10805_A12.JPG" alt="" width="200" /><br><br>250509 A12</td>
    </tr>
  </tbody>
</table>
<table border="0" style="width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;">
  <tbody>
    <tr>
      <td style="width: 50%; text-align: center; padding: 6px 8px; border-bottom: 0.25px dashed black; font-size: 11px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="media/dmsf/2025/05/250511212135_10806_M01.JPG" alt="" width="200" /><br><br>250509 M01</td>
      <td style="width: 50%; text-align: center; padding: 6px 8px; border-bottom: 0.25px dashed black; font-size: 11px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="media/dmsf/2025/05/250511212135_10807_I01.JPG" alt="" width="200" /><br><br>250509 I01</td>
    </tr>
  </tbody>
</table>

If I test the resulting HTML code, it works as expected, with portrait images correctly oriented (Chrome screenshot):

...but the resulting PDF shows me rotated portrait images:

Any idea?
Thanks a lot in advance :)

[bakuro]

This is probably due to the rotation of the image written in the EXIF metadata than the actual image (say, pixel order).

@Wrightie You can easily test this by rotating the image first a few times (in an orientation different than the ones shown above), and then upload. If they show up correct in the PDF, you can try to rotate the picture 360° or first rotate 90° and then back before uploading.

Read more here: https://medium.com/thetiltblog/fixing-rotated-mobile-image-uploads-in-php-803bb96a852c

I once wrote some JS code to correct orientation client side before uploading, so this would not occur in later downloads, pdfs etc. Not sure if I can find that code again though.

[Wrightie]

Thanks a lot @bakuro, I'll test it asap and try to fix my code.
In case you may find your JS code snippet, hope you won't mind sharing it here 😉
Thanks again!

[bakuro]

@Wrightie and anyone else looking for a solution for this, correcting the rotation before upload is actually available inside an npm package: https://www.npmjs.com/package/@lefapps/uploader. Check the file lib/thumbnail/rotate.js for the rotation handler.