I am using react-firebase-file-uploader to upload an avatar to firebase storage. However, any time I upload an image of Portrait Orientation (specifically, images taken on Android and IOS devices - they tend to have OrientationRotate 90 CW in their metadata) the image is rotated 90 degrees.
I have read about this previously and I believe that these smartphone images taken are always in Landscape but the orientation is stored EXIF meta. Please correct me if I am mistaken?
Below is an example of a component that is uploading the image using react-firebase-file-uploader - I know it is not an issue with this package and the solution to this question is likely applicable across many applications.
So, what do I need to do as to read the EXIF orientation, change the rotation (if required, or is it that I need to pass the meta with the file upload?) and still continue the upload?
class ProfilePage extends Component {
state = {
avatar: "",
isUploading: false,
progress: 0,
avatarURL: ""
};
handleProgress = progress => this.setState({ progress });
handleUploadError = error => {
this.setState({ isUploading: false });
console.error(error);
};
handleUploadSuccess = filename => {
this.setState({ avatar: filename, progress: 100, isUploading: false });
firebase
.storage()
.ref("images")
.child(filename)
.getDownloadURL()
.then(url => this.setState({ avatarURL: url }));
};
render() {
return (
<div>
<form>
{this.state.isUploading && <p>Progress: {this.state.progress}</p>}
{this.state.avatarURL && <img src={this.state.avatarURL} />}
<FileUploader
accept="image/*"
name="avatar"
randomizeFilename
storageRef={firebase.storage().ref("images")}
onUploadStart={this.handleUploadStart}
onUploadError={this.handleUploadError}
onUploadSuccess={this.handleUploadSuccess}
onProgress={this.handleProgress}
/>
</form>
</div>
);
}
}
export default ProfilePage;
You should take a look at the modern javascript library JavaScript-Load-Image that has already a complete solution to the EXIF orientation included the auto-fix.
You could use the image scaling (.scale()
method) to convert the image to the canvas and fix your image orientation.
Take a look to Fix image orientation with Javascript.
Here is another interesting lib : react-exif-orientation-img