JS Client-Side Exif Orientation Rotate and Mirror JPEG Images

Question

Digital camera photos are often saved as JPEG with an EXIF  orientation  tag  To display correctly  images need to be rotated mirrored depending on which orientation is set  but browsers ignore this information rendering the image  Even in large commercial web apps  support for EXIF orientation can be spotty 1  The same source also provides a nice summary of the 8 different orientations  a JPEG can have     Sample images are available at 4    The question is how to rotate mirror the image on the client side so that it displays correctly and can be further processed if necessary   There are JS libraries available to parse EXIF data  including the orientation attribute 2  Flickr noted possible performance problem when parsing large images  requiring use of webworkers 3   Console tools can correctly re-orient the images 5  A PHP script solving the problem is available at 6

User · Answer

I am using mixed solution  php css    Containers are needed for    div imgCont2 container needed to rotate  div imgCont1 container needed to zoomOut - width 150   div imgCont container needed for scrollbars  when image is zoomOut        lt  php      image url    your image url jpg        exif    exif read data  image url 0 true        orientation     exif  IFD0    Orientation      gt    lt style gt   imgCont      width 100       overflow auto     imgCont2 data-orientation  8        transform rotate 270deg       margin 15  0     imgCont2 data-orientation  6        transform rotate 90deg       margin 15  0     imgCont2 data-orientation  3        transform rotate 180deg     img      width 100      lt  style gt    lt div class  imgCont  gt     lt div class  imgCont1  gt       lt div class  imgCont2  data-orientation   lt  php echo  orientation    gt   gt         lt img src   lt  php echo  image url    gt   gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

I created a class wrapped in an ES6 module that solves exactly this   It s 103 lines  no dependencies  and fairly nicely structured and documented  meant to be easy to modify reuse   Handles all 8 possible orientations  and is Promise-based   Here you go  hope this still helps someone  https   gist github com vdavid 3f9b66b60f52204317a4cc0e77097913

User · Answer

One liner anyone   I haven t seen anyone mention the browser-image-compression library  It s got a helper function perfect for this    Usage  const orientation   await imageCompression getExifOrientation file   Such a useful tool in many other ways too

User · Answer

ok in addition to  user3096626 answer i think it will be more helpful if someone provided code example  the following example will show you how to fix image orientation comes from url  remote images      Solution 1  using javascript  recommended     because load-image library doesn t extract exif tags from url images only  file blob   we will use both exif-js and load-image javascript libraries  so first add these libraries to your page as the follow    lt script src  https   cdnjs cloudflare com ajax libs exif-js 2 1 0 exif min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs blueimp-load-image 2 12 2 load-image min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs blueimp-load-image 2 12 2 load-image-scale min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs blueimp-load-image 2 12 2 load-image-orientation min js  gt  lt  script gt    Note the version 2 2 of exif-js seems has issues so we used 2 1 then basically what we will do is  a - load the image using window loadImage    b - read exif tags using window EXIF getData    c - convert the image to canvas and fix the image orientation using window loadImage scale    d - place the canvas into the document    here you go     window loadImage   your-image jpg   function  img      if  img type      error         console log  couldn t load image    img       else       window EXIF getData img  function              var orientation   EXIF getTag this   Orientation            var canvas   window loadImage scale img   orientation  orientation    0  canvas  true            document getElementById  container   appendChild canvas               or using jquery     container   append canvas                      of course also you can get the image as base64 from the canvas object and place it in the img src attribute  so using jQuery you can do          my-image   attr  src  canvas toDataURL       here is the full code on  github  https   github com digital-flowers loadimage-exif-example    Solution 2  using html  browser hack    there is a very quick and easy hack  most browsers display the image in the right orientation if the image is opened inside a new tab directly without any html  LOL i don t know why   so basically you can display your image using iframe by putting the iframe src attribute as the image url directly    lt iframe src   my-image jpg  gt  lt  iframe gt      Solution 3  using css  only firefox  amp  safari on ios    there is css3 attribute to fix image orientation but the problem it is only working on firefox and safari ios it is still worth mention because soon it will be available for all browsers  Browser support info from caniuse   img      image-orientation  from-image

User · Answer

In addition to  fareed namrouti s answer   This should be used if the image has to be browsed from a file input element   lt input type  file  name  file  id  file-input  gt  lt br  gt  image after transform   lt br  gt   lt div id  container  gt  lt  div gt    lt script gt      document getElementById  file-input   onchange   function  e            var image   e target files 0           window loadImage image  function  img                if  img type      error                     console log  couldn t load image    img                 else                   window EXIF getData image  function                          console log  load image done                         var orientation   window EXIF getTag this   Orientation                        var canvas   window loadImage scale img                           orientation  orientation    0  canvas  true  maxWidth  200                        document getElementById  container   appendChild canvas                          or using jquery     container   append canvas                                                         lt  script gt

User · Answer

If  width   img width  height   img height  var ctx   canvas getContext  2d      Then you can use these transformations to turn the image to orientation 1  From orientation    ctx transform 1  0  0  1  0  0   ctx transform -1  0  0  1  width  0   ctx transform -1  0  0  -1  width  height   ctx transform 1  0  0  -1  0  height   ctx transform 0  1  1  0  0  0   ctx transform 0  1  -1  0  height  0   ctx transform 0  -1  -1  0  height  width   ctx transform 0  -1  1  0  0  width     Before drawing the image on ctx

User · Answer

For those who have a file from an input control  don t know what its orientation is  are a bit lazy and don t want to include a large library below is the code provided by  WunderBart melded with the answer he links to  https   stackoverflow com a 32490603  that finds the orientation   function getDataUrl file  callback2            var callback   function  srcOrientation                var reader2   new FileReader                reader2 onload   function  e                    var srcBase64   e target result                  var img   new Image                     img onload   function                          var width   img width                          height   img height                          canvas   document createElement  canvas                            ctx   canvas getContext  2d                            set proper canvas dimensions before transform  amp  export                     if  4  lt  srcOrientation  amp  amp  srcOrientation  lt  9                            canvas width   height                          canvas height   width                        else                           canvas width   width                          canvas height   height                                                transform context before drawing image                     switch  srcOrientation                            case 2  ctx transform -1  0  0  1  width  0   break                          case 3  ctx transform -1  0  0  -1  width  height   break                          case 4  ctx transform 1  0  0  -1  0  height   break                          case 5  ctx transform 0  1  1  0  0  0   break                          case 6  ctx transform 0  1  -1  0  height  0   break                          case 7  ctx transform 0  -1  -1  0  height  width   break                          case 8  ctx transform 0  -1  1  0  0  width   break                          default  break                                                draw image                     ctx drawImage img  0  0                           export base64                     callback2 canvas toDataURL                                         img src   srcBase64                             reader2 readAsDataURL file                      var reader   new FileReader            reader onload   function  e                 var view   new DataView e target result               if  view getUint16 0  false     0xFFD8  return callback -2               var length   view byteLength  offset   2              while  offset  lt  length                    var marker   view getUint16 offset  false                   offset    2                  if  marker    0xFFE1                        if  view getUint32 offset    2  false     0x45786966  return callback -1                       var little   view getUint16 offset    6  false     0x4949                      offset    view getUint32 offset   4  little                       var tags   view getUint16 offset  little                       offset    2                      for  var i   0  i  lt  tags  i                            if  view getUint16 offset    i   12   little     0x0112                              return callback view getUint16 offset    i   12    8  little                                      else if   marker  amp  0xFF00     0xFF00  break                  else offset    view getUint16 offset  false                             return callback -1                      reader readAsArrayBuffer file           which can easily be called like such  getDataUrl input files 0   function  imgBase64          vm user BioPhoto   imgBase64

User · Answer

Mederr s context transform works perfectly  If you need to extract orientation only use this function - you don t need any EXIF-reading libs  Below is a function for re-setting orientation in base64 image  Here s a fiddle for it  I ve also prepared a fiddle with orientation extraction demo   function resetOrientation srcBase64  srcOrientation  callback      var img   new Image           img onload   function         var width   img width          height   img height          canvas   document createElement  canvas            ctx   canvas getContext  2d            set proper canvas dimensions before transform  amp  export     if  4  lt  srcOrientation  amp  amp  srcOrientation  lt  9          canvas width   height        canvas height   width        else         canvas width   width        canvas height   height                transform context before drawing image     switch  srcOrientation          case 2  ctx transform -1  0  0  1  width  0   break        case 3  ctx transform -1  0  0  -1  width  height   break        case 4  ctx transform 1  0  0  -1  0  height   break        case 5  ctx transform 0  1  1  0  0  0   break        case 6  ctx transform 0  1  -1  0  height  0   break        case 7  ctx transform 0  -1  -1  0  height  width   break        case 8  ctx transform 0  -1  1  0  0  width   break        default  break                draw image     ctx drawImage img  0  0           export base64     callback canvas toDataURL             img src   srcBase64

User · Answer

Wunderbart s post worked for me combined with statler s improvements   Adding a few more comments and syntax cleanup  and also passing back the orientation value and I have the following code feel free to use  Just call readImageFile   function below and you get back the transformed image and the original orientation  const JpegOrientation          quot NOT JPEG quot        quot NORMAL quot        quot FLIP-HORIZ quot        quot ROT180 quot        quot FLIP-HORIZ-ROT180 quot        quot FLIP-HORIZ-ROT270 quot        quot ROT270 quot        quot FLIP-HORIZ-ROT90 quot        quot ROT90 quot         Provided a image file  determines the orientation of the file based on the EXIF information    Calls the  quot callback quot  function with an index into the JpegOrientation array     If the image is not a JPEG  returns 0  If  the orientation value cannot be read  corrupted file   return -1  function getOrientation file  callback             const reader   new FileReader        reader onload    e    gt             const view   new DataView e target result                    if  view getUint16 0  false      0xFFD8                return callback 0      NOT A JPEG FILE                            const length   view byteLength          let offset   2          while  offset  lt  length                             if  view getUint16 offset 2  false   lt   8      unknown                  return callback -1                            const marker   view getUint16 offset  false               offset    2              if  marker     0xFFE1                                     if  view getUint32 offset    2  false      0x45786966                       return callback -1     unknown                                    const little   view getUint16 offset    6  false      0x4949                  offset    view getUint32 offset   4  little                   const tags   view getUint16 offset  little                   offset    2                  for  var i   0  i  lt  tags  i                          if  view getUint16 offset    i   12   little      0x0112                            return callback view getUint16 offset    i   12    8  little        found orientation code                                                                   else if   marker  amp  0xFF00      0xFF00                    break                            else                    offset    view getUint16 offset  false                                            return callback -1     unknown             reader readAsArrayBuffer file        Takes a jpeg image file as base64 and transforms it back to original  providing the   transformed image in callback   If the image is not a jpeg or is already in normal orientation    just calls the callback directly with the source    Set type to the desired output type if transformed  default is image jpeg for speed  function resetOrientation srcBase64  srcOrientation  callback  type    quot image jpeg quot              if  srcOrientation  lt   1       no transform needed         callback srcBase64           return                 const img   new Image             img onload        gt            const width   img width          const height   img height          const canvas   document createElement  canvas            const ctx   canvas getContext  quot 2d quot                set proper canvas dimensions before transform  amp  export         if  4  lt  srcOrientation  amp  amp  srcOrientation  lt  9                canvas width   height              canvas height   width            else               canvas width   width              canvas height   height                        transform context before drawing image         switch  srcOrientation                                   case 1  normal  no transform needed                              case 2                      ctx transform -1  0  0  1  width  0                      break                case 3                    ctx transform -1  0  0  -1  width  height                      break                case 4                     ctx transform 1  0  0  -1  0  height                      break                case 5                     ctx transform 0  1  1  0  0  0                      break                case 6                     ctx transform 0  1  -1  0  height  0                      break                case 7                     ctx transform 0  -1  -1  0  height  width                      break                case 8                     ctx transform 0  -1  1  0  0  width                      break                default                     break                        draw image         ctx drawImage img  0  0              export base64         callback canvas toDataURL type   srcOrientation               img src   srcBase64         Read an image file  providing the returned data to callback  If the image is jpeg   and is transformed according to EXIF info  transform it first    The callback function receives the image data and the orientation value  index into JpegOrientation  export function readImageFile file  callback         getOrientation file   orientation    gt             console log  quot Read file   quot  quot    file name    quot   quot  with orientation   quot    JpegOrientation orientation             const reader   new FileReader            reader onload        gt       when reading complete              const img   reader result              resetOrientation img  orientation  callback                      reader readAsDataURL file      start read

User · Answer

WunderBart s answer was the best for me  Note that you can speed it up a lot if your images are often the right way around  simply by testing the orientation first and bypassing the rest of the code if no rotation is required   Putting all of the info from wunderbart together  something like this   var handleTakePhoto   function          let fileInput  HTMLInputElement    lt HTMLInputElement gt document getElementById  photoInput        fileInput addEventListener  change    e  any    gt  handleInputUpdated fileInput  e target files        fileInput click       var handleInputUpdated   function  fileInput  HTMLInputElement  fileList        let file   null       if  fileList length  gt  0  amp  amp  fileList 0  type match   image                isLoading true           file   fileList 0           getOrientation file  function  orientation                if  orientation    1                    imageBinary URL createObjectURL file                    isLoading false                             else                                resetOrientation URL createObjectURL file   orientation  function  resetBase64Image                        imageBinary resetBase64Image                       isLoading false                                                            fileInput removeEventListener  change           from http   stackoverflow com a 32490603 export function getOrientation file  callback        var reader   new FileReader         reader onload   function  event  any            var view   new DataView event target result            if  view getUint16 0  false     0xFFD8  return callback -2            var length   view byteLength              offset   2           while  offset  lt  length                var marker   view getUint16 offset  false               offset    2               if  marker    0xFFE1                    if  view getUint32 offset    2  false     0x45786966                        return callback -1                                     var little   view getUint16 offset    6  false     0x4949                  offset    view getUint32 offset   4  little                   var tags   view getUint16 offset  little                   offset    2                   for  var i   0  i  lt  tags  i                        if  view getUint16 offset    i   12   little     0x0112                          return callback view getUint16 offset    i   12    8  little                              else if   marker  amp  0xFF00     0xFF00  break              else offset    view getUint16 offset  false                     return callback -1               reader readAsArrayBuffer file slice 0  64   1024        export function resetOrientation srcBase64  srcOrientation  callback        var img   new Image         img onload   function              var width   img width              height   img height              canvas   document createElement  canvas                ctx   canvas getContext  2d                set proper canvas dimensions before transform  amp  export         if  4  lt  srcOrientation  amp  amp  srcOrientation  lt  9                canvas width   height              canvas height   width            else               canvas width   width              canvas height   height                        transform context before drawing image         switch  srcOrientation                case 2  ctx transform -1  0  0  1  width  0   break              case 3  ctx transform -1  0  0  -1  width  height   break              case 4  ctx transform 1  0  0  -1  0  height   break              case 5  ctx transform 0  1  1  0  0  0   break              case 6  ctx transform 0  1  -1  0  height  0   break              case 7  ctx transform 0  -1  -1  0  height  width   break              case 8  ctx transform 0  -1  1  0  0  width   break              default  break                        draw image         ctx drawImage img  0  0               export base64         callback canvas toDataURL                 img src   srcBase64

User · Answer

I ve written a little php script which rotates the image  Be sure to store the image in favour of just recalculate it each request    lt  php  header  Content-type  image jpeg     img    IMG URL     exif    exif read data  img 0 true    orientation     exif  IFD0    Orientation    if  orientation    7     orientation    8         degrees   90    elseif  orientation    5     orientation    6         degrees   270    elseif  orientation    3     orientation    4         degrees   180    else        degrees   0     rotate   imagerotate imagecreatefromjpeg  img    degrees  0   imagejpeg  rotate   imagedestroy  rotate      gt    Cheers

User · Answer

The github project JavaScript-Load-Image provides a complete solution to the EXIF orientation problem  correctly rotating mirroring images for all 8 exif orientations  See the online demo of javascript exif orientation  The image is drawn onto an HTML5 canvas  Its correct rendering is implemented in js load-image-orientation js through canvas operations   Hope this saves somebody else some time  and teaches the search engines about this open source gem

[javascript] JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

Examples related to javascript

Examples related to rotation

Examples related to html5-canvas

Examples related to exif