Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ImageBitmap orientation test
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment