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.

Sign up for GitHub

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

Jump to bottom

EXIF Orientation metadata option does not affect when drawing image on canvas. #1670

Open
cherevichka opened this issue Sep 29, 2020 · 6 comments · May be fixed by #2296
Open

EXIF Orientation metadata option does not affect when drawing image on canvas. #1670

cherevichka opened this issue Sep 29, 2020 · 6 comments · May be fixed by #2296
Labels
Bug Good first issue Help wanted Images & Formats

Comments

@cherevichka
Copy link

If the JPEG image has orientation metadata, the drawImage method draws an unrotated image.

Steps to Reproduce

  1. Download JPG image with orientation metadata:
    red-line-rotated

  2. Load the image with loadImage utility.

  3. Draw the image on canvas.

const image = await loadImage("image_path");
const canvas = createCanvas(image.width, image.height);
const context = canvas.getContext("2d");

context.drawImage(image, 0, 0);

const result = canvas.toBuffer();

fs.writeFileSync("result_path", result);

Expected:
github1

Got:
github2

Tested on MacOS, CentoOS.

Thanks!
@willemmulder
Copy link
Contributor

willemmulder commented Oct 13, 2020 •
edited

@cherevichka Yes I'm having the same problem on Windows and Linux!

Did you find a workaround by any chance?

@willemmulder
Copy link
Contributor

@cherevichka I'm now using the 'jpeg-autorotate' package to fix images before I use canvas.loadImage. It works, but it is not optimal :-)

@cherevichka
Copy link
Author

@willemmulder I use the exif-parser package to determine the orientation of the image, and then rotate the image when needed.

It works, but it is not optimal :-)

@saberjsd
Copy link

saberjsd commented Jun 4, 2021

@cherevichka Hello, would you tell me how to do in code to resolve this problem?

@LinusU
Copy link
Collaborator

LinusU commented Oct 18, 2021

Could anyone confirm that the browsers canvases does indeed rotate the image according to exif data when using drawImage?

@nrkn
Copy link

nrkn commented Feb 5, 2022

@LinusU yes, it works as expected in browser

@LinusU LinusU mentioned this issue Feb 8, 2022
Closed
@prewett-toptal prewett-toptal linked a pull request Oct 19, 2023 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Good first issue Help wanted Images & Formats
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Handle Exif orientations for JPEG images (fixes #1670) plumdev/node-canvas
6 participants
@willemmulder @LinusU @zbjornson @nrkn @saberjsd @cherevichka