Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resize images with respect for the EXIF orientation flag #70

Open
Gompje opened this issue Nov 7, 2020 · 5 comments · Fixed by unjs/ipx#13
Open

Resize images with respect for the EXIF orientation flag #70

Gompje opened this issue Nov 7, 2020 · 5 comments · Fixed by unjs/ipx#13
Labels
enhancement New feature or request

Comments

@Gompje
Copy link

Gompje commented Nov 7, 2020

The EXIF info of an image contains a 'rotation flag'. When resizing the image, it should take this into account. Almost all the apps only manipulate this flag when asking to rotate.

This was my ugly hacked code for Hugo (Go). But I'm much better at Vue and converting my Hugo project to Nuxt static. I'm willing to add this to your package as a pull -- but I do not know where to start. Deadline. Very Tired.

{{ $orientation := 1 }}
{{ with $image.Exif }}
{{ $orientation = .Tags.Orientation }}
{{ end }}

{{ if eq $orientation 1 }}
{{ $image := .Resize "480x" }}
{{ else if (eq $orientation 8) }}
// Rotate the image 90deg CCW (.Resize "r90")
{{ $image := .Resize "480x" "r90" }}
{{ end }}

obligatoire stackoverflow thing:
https://stackoverflow.com/questions/13872331/rotating-an-image-with-orientation-specified-in-exif-using-python-without-pil-in

resources:

@Gompje
Copy link
Author

Gompje commented Nov 7, 2020

And by apps I really basically mean: "I want my user to take a picture with his smartphone. Let him manipulate it like he/she sees it on his fit -- on his/her smartphone. Add that to git, push and voila: static site updated"

@farnabaz
Copy link
Member

Thank you for the explanation. We can apply operientation before removing EXIF data.

@Gompje
Copy link
Author

Gompje commented Nov 10, 2020

Thanks for this! @farnabaz I had a little bit of time this morning. Had kinda the same idea :) but I did not find where. Turns out I was looking in the wrong files - ha!

@farnabaz: I'm looking to be more involved into Nuxt, and to be more contributing. I forked this project and want to help. Will make myself familiar with the code and such but when I want to run the playground, it gives me an error:

→ Its now lunch, but I will add this to my fork. and this my fork on my NUXT install which currently uses this module (obviously) and has the image rotation problem. I will give feedback if it works or not

 FATAL  Cannot resolve "~/node_modules/.cache/nuxt-image" from "[MY FS]/nuxt-modules/image/playground/node_modules/.cache/nuxt-image"
  • with [MY FS] as in the abs path of that folder.
  • with [nuxt-modules] just the root folder containing all my future contrubitions to nuxt modules ;-)

I just did what I normally do, and definatly build yarn and things like that. I dont now what I'm missing. The .cache folder doesn't even exists

@Gompje
Copy link
Author

Gompje commented Nov 10, 2020

IDK if I did something wrong, but this doesn't seem to work yet.

  • I forked the IPX repo, your feature branch (build it etc..)
  • I told in my nuxt project to use my local repo
  • this works: my local files are copied to the node_modules where before there was the package dist

when I look at the cache images (and on the page) the image isn't rotated.

I've checked the EXIF info on the file and it does include the tag. The code I used in the issue worked in Hugo. Same image.

@farnabaz farnabaz reopened this Nov 11, 2020
@danielroe danielroe added the enhancement New feature or request label May 16, 2021 — with Volta.net
@niklasfjeldberg
Copy link

Any update on this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants