0

I am getting some images displaying sideways that need to be turned due to EXIF metadata. I have used image-orientation: from-image to fix the img tags. What is the equivalent for a canvas tag.

SunLightGirl99
  • 25
  • 11

1 Answers1

0

CSS image-orientation is not well-supported, and the MDN documentation says it will likely be deprecated. If you know that all of the images are already rotated (in the same direction), you can either:

a.) open the images in an image editor such as GIMP and save over them (GIMP will overwrite the rotation data, providing you a warning first).

b.) Use the CSS transform property:

CSS


.my-images-selector {

  /* 90deg or 270deg depending on the rotation */
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

If you are drawing an image onto an entire canvas, you can just apply the CSS above to the canvas element.

c.) For drawing rotated images within a canvas, use the canvas context transform method (you can refer here: HTML5 Canvas Rotate Image )

Also, see JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

tlong314
  • 546
  • 4
  • 8
  • My problem is that I don't know how images need to be rerotated beforehand. We are displaying them after connecting to an s3 bucket. – SunLightGirl99 Mar 31 '20 at 19:17
  • 1
    ok, to answer your question there is no equivalent for drawing an image onto a canvas. `drawImage` ignores EXIF data, so documentation suggests determining the orientation and using canvas context `transform`method as I noted. It seems that the most preferred way to extract the data is by using exif.js: https://github.com/exif-js/exif-js – tlong314 Apr 01 '20 at 15:44
  • and if you were asking for a CSS-specific equivalent for canvas, it seems that the image-specific `image-orientation` property was marked for deprecation before any such equivalent could even be considered. (I doubt one would have ever been suggested though, as `` has no need for its own element-specific CSS properties, as you have complete control with JavaScript over how things are drawn to it.) – tlong314 Apr 01 '20 at 15:48
  • @tlong314 I've found that using Chrome 83, `drawImage` does indeed use the EXIF data to draw the image to the canvas. It will behave as though `image-orientation: from-image` is set. I haven't found a way to change this through JavaScript as setting the style directly seems to be ignored. – codemonkey Jun 07 '20 at 03:21