How to ignore Image exif data on a Canvas in Chrome 81+

user_602139 0
Viewed 651

When I call context.drawImage in Chrome 81+ it will auto-rotate the image. I want to disable this. I can disable it in an img tag using image-orientation:none, but that doesn't work on a canvas.

It seems to ignore the image-orientation style. In this example below, img tag does not get auto-rotated (as expected), but the canvas does, despite trying to disable it.

How do you prevent drawImage from rotating based on exif data, or at least detect that it has done so?

<html>
<head>
    <script>
    window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("imgtest");
      // This style is ignored
      img.style.imageOrientation = 'none';
      ctx.drawImage(img, 0, 0);
    };
    </script>
</head>
<body>
    <p>
        <img id="imgtest" style="image-orientation:none;" src="portrait.jpg"/>
        <canvas id="myCanvas" width="240" height="297"></canvas>    
    </p>
</body>
</html>
html5-canvas google-chrome css html javascript
1 Answers

I found a workaround to my own problem. I am using a feature detection library modernizr.com to find out of the browser will automatically rotate images. 

if(Modernizr.exiforientation) {
  // Browser does the image rotation
}

I'd prefer a solution that didn't require a new library, but this works.

user_6021390
Related