When I upload an image in my web app it shows sideways so I am trying to use this module to rotate an image based on the EXIF data.
My code looks like this:
<template>
<div :class="$style.form247">
<Canvas :url="image" :value="value" @input="$emit('input', $event)" />
<div :class="$style.file">
Choose file
<input :class="$style.input" type="file" @change="onFileUpload">
</div>
</div>
</template>
<script>
import Canvas from './Canvas'
const jo = require('jpeg-autorotate')
const options = {quality: 100}
export default {
props: ['value'],
components: {
Canvas
},
data() {
return {
image: null
}
},
methods: {
onFileUpload(event) {
const selectedFile = event.target.files[0]
const reader = new FileReader()
const myBuffer = jo.rotate(selectedFile, options)
.then(({buffer, orientation, dimensions, quality}) => {
console.log(`Orientation was ${orientation}`)
console.log(`Dimensions after rotation: ${dimensions.width}x${dimensions.height}`)
console.log(`Quality: ${quality}`)
// ...Do whatever you need with the resulting buffer...
return buffer
})
.catch((error) => {
console.log('An error occurred when rotating the file: ' + error.message)
})
reader.onload = (e) => this.image = e.target.result
reader.readAsDataURL(selectedFile)
}
}
}
</script>
When I try to run my application I get an error saying that jo.rotate function doesn't have a path or buffer as a parameter, which is what I thought the selectedFile constant was. Basically I am confused as how to use this module within my code. I looked at the examples here in the sample usage section, but I am confused as how to how to use the rotate function. Like am I supposed to store the results of the jo.rotate function in a variable like this?
const myBuffer = jo.rotate(selectedFile, options)
.then(({buffer, orientation, dimensions, quality}) => {
console.log(`Orientation was ${orientation}`)
console.log(`Dimensions after rotation: ${dimensions.width}x${dimensions.height}`)
console.log(`Quality: ${quality}`)
// ...Do whatever you need with the resulting buffer...
return buffer
})
.catch((error) => {
console.log('An error occurred when rotating the file: ' + error.message)
})
and if so do I pass it to the readAsDataURL function like so reader.readAsDataURL(myBuffer)?
I am also pretty sure that where I currently have the jo.rotate function is wrong, but I am not sure about the correct place to put since I am new to javascript. I have the feeling that it needs to go in the reader.onload function, but I am not sure how to go about it.
