mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-26 03:06:25 +02:00
66 lines
1.7 KiB
React
66 lines
1.7 KiB
React
|
import React, { PureComponent } from 'react'
|
||
|
import EXIF from 'exif-js'
|
||
|
import styles from './Exif.module.scss'
|
||
|
|
||
|
export default class Exif extends PureComponent {
|
||
|
state = {
|
||
|
modelvalue: null,
|
||
|
shutterspeedvalue: null,
|
||
|
aperturevalue: null,
|
||
|
exposurevalue: null,
|
||
|
isovalue: null,
|
||
|
focallengthvalue: null
|
||
|
}
|
||
|
|
||
|
componentDidMount() {
|
||
|
this.getExif(this.props.image)
|
||
|
}
|
||
|
|
||
|
getExif = image => {
|
||
|
EXIF.getData(image, function() {
|
||
|
// Get individual data
|
||
|
const modelvalue = EXIF.getTag(this, 'Model')
|
||
|
const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime')
|
||
|
const aperturevalue = EXIF.getTag(this, 'FNumber')
|
||
|
const exposurevalue = EXIF.getTag(this, 'ExposureBias')
|
||
|
const isovalue = EXIF.getTag(this, 'ISOSpeedRatings')
|
||
|
const focallengthvalue = EXIF.getTag(this, 'FocalLength')
|
||
|
|
||
|
console.log(modelvalue)
|
||
|
|
||
|
this.setState({
|
||
|
modelvalue,
|
||
|
shutterspeedvalue,
|
||
|
aperturevalue,
|
||
|
exposurevalue,
|
||
|
isovalue,
|
||
|
focallengthvalue
|
||
|
})
|
||
|
})
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const {
|
||
|
modelvalue,
|
||
|
shutterspeedvalue,
|
||
|
aperturevalue,
|
||
|
exposurevalue,
|
||
|
isovalue,
|
||
|
focallengthvalue
|
||
|
} = this.state
|
||
|
|
||
|
return (
|
||
|
<aside className="exif">
|
||
|
<span className="exif__model" title="Camera model">
|
||
|
{modelvalue}
|
||
|
</span>
|
||
|
<span className="exif__aperture" title="Aperture" />
|
||
|
<span className="exif__shutterspeed" title="Shutter speed" />
|
||
|
<span className="exif__exposure" title="Exposure" />
|
||
|
<span className="exif__iso" title="ISO" />
|
||
|
<span className="exif__focallength" title="Focal length" />
|
||
|
</aside>
|
||
|
)
|
||
|
}
|
||
|
}
|