基于EXIF数据javascript使用Jpeg-autorotate npm模块旋转图像

Question

当我上传一个图片在我的网页应用程序，它显示横向，所以我试图使用这个模块旋转图像的基础上的EXIF数据。

我的代码如下所示：

 <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>

当我试图运行我的应用程序时，我会看到一个错误，它说jo.rotate函数没有路径或缓冲区作为参数，这就是我所认为的selectedFile常量。基本上，我对如何在代码中使用这个模块感到困惑。我在示例用法一节中查看了示例，但我对如何使用旋转函数感到困惑。就像我应该将jo.rotate函数的结果存储在这样的变量中吗？

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)
})

如果是这样的话，我是否将它传递给readAsDataURL函数，比如so reader.readAsDataURL(myBuffer)？

我也非常肯定，我目前拥有jo.rotate函数的地方是错误的，但是我不确定应该放在哪个位置，因为我对javascript还不熟悉。我有一种感觉，它需要在reader.onload函数中运行，但我不知道如何实现。

Answer 1

不幸的是，jpeg-autorotate不能在浏览器中工作。您需要使用exif解析库提取方向，然后使用css、transform:rotate(...)或画布旋转图像。

对于方向解析，我建议使用exifr。它的速度很快，可以处理数百张照片，而不会破坏浏览器，也不会花费很长时间:)。此外，还有一个简洁的简单API，您可以为它提供几乎任何东西-元素、URL、缓冲区、ArrayBuffer、甚至base64 url或string等等。

exifr.orientation(file).then(val => {
  console.log('orientation:', val)
})

这为您提供了一个从1到8的整数(了解更多关于这里的这些值的信息)