Photos from cameras and phones often contain EXIF orientation metadata. This demo
detects the EXIF orientation tag and displays both the raw image and the correctly
oriented version using canvas transforms.
Drag & drop files here, or paste from clipboard
Raw (No Correction)
Corrected Orientation
EXIF Data:
Reading...
<au:AjaxFileUpload ID="Uploader1" runat="server"
EnableExifOrient="true"
AllowedExtensions=".jpg,.jpeg"
AutoUpload="false" />
// JavaScript: Read EXIF orientation from binary data
function getExifOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
// Parse JPEG markers to find EXIF orientation tag (0x0112)
// Returns orientation value 1-8
};
reader.readAsArrayBuffer(file.slice(0, 65536));
}
// Apply orientation transform to canvas context
function applyOrientation(ctx, orientation, w, h) {
switch (orientation) {
case 3: ctx.rotate(Math.PI); ctx.translate(-w, -h); break;
case 6: ctx.rotate(Math.PI / 2); ctx.translate(0, -h); break;
case 8: ctx.rotate(-Math.PI / 2); ctx.translate(-w, 0); break;
}
}