JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/exif-reader.min.js"></script>
<!-- screw-filereader will take care of exif rotation for u -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

<form action="https://httpbin.org/post" method="post" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="image" accept="image/*" />
  <input type="submit" name="do" value="submit"/>
</form>

<pre class="exif-info"></pre>

JavaScript

// Used for creating a new FileList in a round-about way
function FileListItem(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (let c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError("expected argument to FileList is File or array of File objects")
  for (b = (new ClipboardEvent("")).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}
const fileInput = document.querySelector('#fileInput');

fileInput.onchange = async function change() {
  const file = this.files[0];
  if (!file) return;

  try {
    const arrayBuffer = await new Response(file).arrayBuffer();
    const exif = ExifReader.load(arrayBuffer);
    const exifOrientation = exif.Orientation;
   let orientation = 1;
    console.log(exif);
    console.log(exif['Image Height'].description);
     console.log(exif['Image Width'].description);
    

    if (exifOrientation) {      
    orientation - exifOrientation.value;
    }

    const img = await file.image();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const maxWidth = 320;
    const maxHeight = 240;

    const ratio = Math.min(maxWidth / img.width, maxHeight / img.height);
    const width = img.width * ratio;
    const height = img.height * ratio;

    canvas.width = width;
    canvas.height = height;

    switch (orientation.value) {
      case 3:
        canvas.width = height;
        canvas.height = width;
        ctx.translate(height, 0);
        ctx.rotate(Math.PI);
        break;
      case 6:
        canvas.width = height;
        canvas.height = width;
        ctx.translate(0, height);
        ctx.rotate(-Math.PI / 2);
        break;
      case 8:
        canvas.width = height;
        canvas.height = width;
        ctx.translate(height, width);
        ctx.rotate(-Math.PI / 2);
        break;
      default:
        break;
    }

    ctx.drawImage(img, 0, 0, width, height);

   ...