robertknight/orientation-test.html

## orientation-test.html
<html>
  <title>Canvas drawImage EXIF orientation test</title>
  <style>
    #dropZone {
      width: 300px;
      height: 100px;
      background-color: #aaa;
      border: 1px solid #ccc;
    }

    #canvas {
      width: 500px;
      border: 1px solid #ccc;
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  </style>
  <body>
    <div class="content">
      <div id="dropZone">Drop image here</div>
      <div>
        <input type="checkbox" id="cloneImageCheckbox">
        <label for="cloneImageCheckbox">Clone image before drawing</label>
      </div>
      <canvas id="canvas"></canvas>
    </div>
    <script>
      function fileFromDropEvent(event) {
        if (!event.dataTransfer) {
          return null;
        }
        for (let i = 0; i < event.dataTransfer.items.length; i++) {
          const item = event.dataTransfer.items[i];
          const file = item.getAsFile();
          if (file) {
            return file;
          }
        }
        return null;
      }

      const dropZone = document.querySelector("#dropZone");
      const canvas = document.querySelector("#canvas");
      const cloneCheckbox = document.querySelector('#cloneImageCheckbox');

      const loadImage = async (file) => {
        let image = await createImageBitmap(file);

        if (cloneCheckbox.checked) {
          image = structuredClone(image);
        }

        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);
      };

      dropZone.ondragover = (e) => {
        e.preventDefault();
      };
      dropZone.ondrop = (e) => {
        e.preventDefault();
        const file = fileFromDropEvent(e);
        loadImage(file);
      };
    </script>
  </body>
</html>
	<html>
	<title>Canvas drawImage EXIF orientation test</title>
	<style>
	#dropZone {
	width: 300px;
	height: 100px;
	background-color: #aaa;
	border: 1px solid #ccc;
	}

	#canvas {
	width: 500px;
	border: 1px solid #ccc;
	}

	.content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}
	</style>
	<body>
	<div class="content">
	<div id="dropZone">Drop image here</div>
	<div>
	<input type="checkbox" id="cloneImageCheckbox">
	<label for="cloneImageCheckbox">Clone image before drawing</label>
	</div>
	<canvas id="canvas"></canvas>
	</div>
	<script>
	function fileFromDropEvent(event) {
	if (!event.dataTransfer) {
	return null;
	}
	for (let i = 0; i < event.dataTransfer.items.length; i++) {
	const item = event.dataTransfer.items[i];
	const file = item.getAsFile();
	if (file) {
	return file;
	}
	}
	return null;
	}

	const dropZone = document.querySelector("#dropZone");
	const canvas = document.querySelector("#canvas");
	const cloneCheckbox = document.querySelector('#cloneImageCheckbox');

	const loadImage = async (file) => {
	let image = await createImageBitmap(file);

	if (cloneCheckbox.checked) {
	image = structuredClone(image);
	}

	canvas.width = image.width;
	canvas.height = image.height;
	const context = canvas.getContext("2d");
	context.drawImage(image, 0, 0);
	};

	dropZone.ondragover = (e) => {
	e.preventDefault();
	};
	dropZone.ondrop = (e) => {
	e.preventDefault();
	const file = fileFromDropEvent(e);
	loadImage(file);
	};
	</script>
	</body>
	</html>