exif2css

exif2css Converts EXIF Orientation To CSS Transform Rules (in 772 bytes gzipped).

yarn add -E exif2css

Table Of Contents

• Table Of Contents
• API
• exif2css(orientation: (number|string)): Exif2CssReturn
  • Exif2CssReturn
• Usage
  • As Node Module
  • As Script
• Testing
• Copyright

API

The package is available by importing its default function:

import exif2css from 'exif2css'

exif2css(
  orientation: (number|string),
): Exif2CssReturn

Converts an integer or a string representing EXIF orientation into required CSS with transfrom and optionally transform-origin properties. They can then be used as needed, possibly prefixing the rules with browser-specific tags (e.g., -webkit-transform and -webkit-transform-origin).

One known issue is that with orientations > 4, the transformed image will have different dimensions from its box, so that whitespace might appear on the right and at the bottom of the image.

import exif2css from 'exif2css'

['not-an-exif-orientation', 1,2,3,4,5,6,7,8]
  .forEach((i) => {
    console.log('Orientation: %s', i)
    const result = exif2css(i)
    console.log(result)
    console.log()
  })

Orientation: not-an-exif-orientation
{}

Orientation: 1
{}

Orientation: 2
{ transform: 'rotateY(180deg)',
  transforms: { rotateY: 180 },
  transformStrings: { rotateY: 'rotateY(180deg)' } }

Orientation: 3
{ transform: 'rotate(180deg)',
  transforms: { rotate: 180 },
  transformStrings: { rotate: 'rotate(180deg)' } }

Orientation: 4
{ transform: 'rotate(180deg) rotateY(180deg)',
  transforms: { rotate: 180, rotateY: 180 },
  transformStrings: { rotate: 'rotate(180deg)', rotateY: 'rotateY(180deg)' } }

Orientation: 5
{ transform: 'rotate(270deg) rotateY(180deg)',
  'transform-origin': 'top left',
  transforms: { rotate: 270, rotateY: 180 },
  transformStrings: { rotate: 'rotate(270deg)', rotateY: 'rotateY(180deg)' } }

Orientation: 6
{ transform: 'translateY(-100%) rotate(90deg)',
  'transform-origin': 'bottom left',
  transforms: { translateY: -1, rotate: 90 },
  transformStrings: { translateY: 'translateY(-100%)', rotate: 'rotate(90deg)' } }

Orientation: 7
{ transform: 'translateY(-100%) translateX(-100%) rotate(90deg) rotateY(180deg)',
  'transform-origin': 'bottom right',
  transforms: { translateY: -1, translateX: -1, rotate: 90, rotateY: 180 },
  transformStrings: 
   { translateY: 'translateY(-100%)',
     translateX: 'translateX(-100%)',
     rotate: 'rotate(90deg)',
     rotateY: 'rotateY(180deg)' } }

Orientation: 8
{ transform: 'translateX(-100%) rotate(270deg)',
  'transform-origin': 'top right',
  transforms: { translateX: -1, rotate: 270 },
  transformStrings: { translateX: 'translateX(-100%)', rotate: 'rotate(270deg)' } }

Exif2CssReturn: The return type of the function.

Name	Type	Description
transform	string	The complete CSS transform rule that contains all transforms.
transform-origin	('top left'|'top right'|'bottom left'|'bottom right')	The transform origin CSS rule for orientations >= 5.
transforms	{translateY: number, translateX: number, rotate: number, rotateY: number}	The raw transforms as numbers, where translates are either -1 or 1 and rotations are either 90, 180 and 270.
transformStrings	{translateY: string, translateX: string, rotate: string, rotateY: string}	The transforms split by individual rules that can be applied in the browser.

Usage

The module can be either required in Node.JS, or downloaded as the compiled file from the dist folder and inserted on the webpage.

As Node Module

The package is published both as CommonJS module with the main field, and as a ES6 module with the module field. Node will automatically pick up the main version, whereas some bundles will be able to use the module.

yarn add -E exif2css
npm i exif2css

import exif2css from 'exif2css' // or
const exif2css = require('exif2css')

const css = exif2css(6)

As Script

Exif2Css has been compiled with Depack using Google Closure Compiler. Download the file manually and embed it on the webpage.

<img src="some-image.jpg">
<script src="exif2css.js"></script>
<script>
  var img = document.querySelector('img')
  var orientation = 6
  var css = exif2css(orientation)

  if (css.transform) {
      img.style.transform = css.transform
  }
  if (css['transform-origin']) {
      img.style['transform-origin'] = css['transform-origin']
  }
</script>

Testing

The module has been automatically tested in Chrome by inserting pre-compiled images with set orientation, applying generated styles from exif2css, taking screenshots and comparing them against the expected image, therefore everything works properly.

Copyright

(c) Demimonde 2019