Convert EXIF orientation to CSS transform rules.
npm install exif2css
exif2css Converts EXIF Orientation To CSS Transform Rules (in 772 bytes gzipped).
``sh`
yarn add -E exif2css
- Table Of Contents
- API
- exif2css(orientation: (number|string)): Exif2CssReturn
* Exif2CssReturn
- Usage
* As Node Module
* As Script
- Testing
- Copyright
The package is available by importing its default function:
`js`
import exif2css from 'exif2css'
orientation: (number|string),
): Exif2CssReturnConverts 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.
`js
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()
})
``js
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. |-1
| 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 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. |
The module can be either required in _Node.JS_, or downloaded as the compiled file from the _dist_ folder and inserted on the webpage.
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.
`bash`
yarn add -E exif2css
npm i exif2css
`js
import exif2css from 'exif2css' // or
const exif2css = require('exif2css')
const css = exif2css(6)
`
_Exif2Css_ has been compiled with _Depack_ using Google Closure Compiler. Download the file manually and embed it on the webpage.
`html`
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.
(c) [Demimonde][1] 2019
[1]: https://demimonde.cc