Struggling with an issue in my web app where uploaded images display sideways, I decided to utilize this module to rotate images based on the EXIF data.
Here's a snippet of my code:
<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>
Encountering an error during application execution related to the jo.rotate function not receiving the correct parameters, despite passing them through the selectedFile constant. Reviewing examples in the documentation under sample usage provided some guidance, but I remain puzzled about integrating the rotate function within my code. Should I save the results of jo.rotate into 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)
})
If so, should I then pass it to the readAsDataURL function like this: reader.readAsDataURL(myBuffer)?
I suspect that my placement of the jo.rotate function is incorrect and may belong inside the reader.onload function due to my limited JavaScript knowledge. Any insights on where to correctly position this function would be greatly appreciated.