From 4991a5efbd0c55f43b66b10f131ddc6e054b6392 Mon Sep 17 00:00:00 2001 From: Joel Klinghed Date: Sun, 25 Feb 2024 09:15:49 +0100 Subject: Disable automatic image rotation in browser and fix our own transforms When I implemented the initial transformations I did not test them all, and also did not know that the default for a long time has been to auto-rotate images per EXIF in the browser so the poor images got rotated twice. Used example images from https://github.com/recurser/exif-orientation-examples to make sure to check all rotations this time. --- example/static/js/media.js | 1 + src/site.cc | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/example/static/js/media.js b/example/static/js/media.js index 5f0f314..d07ce49 100644 --- a/example/static/js/media.js +++ b/example/static/js/media.js @@ -55,6 +55,7 @@ function show_media(index, push_state) { video.style.display = 'none'; img.onload = function() { img.style.transform = m.transform; }; img.src = m.src; + img.style.imageOrientation = 'none'; img.style.display = 'inline'; } else { img.style.display = 'none'; diff --git a/src/site.cc b/src/site.cc index b54e862..f9fbb88 100644 --- a/src/site.cc +++ b/src/site.cc @@ -361,22 +361,22 @@ private: args.push_back(js::quote("scaleX(-1)")); break; case Rotation::ROTATED_90: - args.push_back(js::quote("scaleX(-1) rotate(-90deg)")); + args.push_back(js::quote("scaleX(-1) rotate(90deg)")); break; case Rotation::ROTATED_90_MIRRORED: - args.push_back(js::quote("rotate(-90deg)")); + args.push_back(js::quote("rotate(90deg)")); break; case Rotation::ROTATED_180: - args.push_back(js::quote("scaleY(-1)")); + args.push_back(js::quote("scaleX(-1) scaleY(-1)")); break; case Rotation::ROTATED_180_MIRRORED: - args.push_back(js::quote("scaleX(-1) scaleY(-1)")); + args.push_back(js::quote("scaleY(-1)")); break; case Rotation::ROTATED_270: - args.push_back(js::quote("scaleX(-1) rotate(90deg)")); + args.push_back(js::quote("scaleX(-1) rotate(-90deg)")); break; case Rotation::ROTATED_270_MIRRORED: - args.push_back(js::quote("rotate(90deg)")); + args.push_back(js::quote("rotate(-90deg)")); break; } content += "media.push(new Image("; -- cgit v1.2.3-70-g09d2