Fix image rotation on Client-Side Exif Orientation. Fixed images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image.
Project:
I have a javascript file uploader that I need the following fix to be added on :
function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();
[login to view URL] = function() {
var width = [login to view URL],
height = [login to view URL],
canvas = [login to view URL]('canvas'),
ctx = [login to view URL]("2d");
// set proper canvas dimensions before transform & export
if (4 < srcOrientation && srcOrientation < 9) {
[login to view URL] = height;
[login to view URL] = width;
} else {
[login to view URL] = width;
[login to view URL] = height;
}
// transform context before drawing image
switch (srcOrientation) {
case 2: [login to view URL](-1, 0, 0, 1, width, 0); break;
case 3: [login to view URL](-1, 0, 0, -1, width, height ); break;
case 4: [login to view URL](1, 0, 0, -1, 0, height ); break;
case 5: [login to view URL](0, 1, 1, 0, 0, 0); break;
case 6: [login to view URL](0, 1, -1, 0, height , 0); break;
case 7: [login to view URL](0, -1, -1, 0, height , width); break;
case 8: [login to view URL](0, -1, 1, 0, 0, width); break;
default: break;
}
// draw image
[login to view URL](img, 0, 0);
// export base64
callback([login to view URL]());
};
[login to view URL] = srcBase64;
}
var originalImage = [login to view URL]("image-original"),
resetImage = [login to view URL]("image-reset");
resetOrientation([login to view URL], 5, function(resetBase64Imagea) {
[login to view URL] = resetBase64Imagea;
});
Hello,
That job sounds easy enough to do, and I am free today so I can start working ASAP to have it finished in the next few hours.
Please feel free to take a look at my portfolio on my profile, and to reach out!
Thank you for taking the time to read this "proposal".
Best regards