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

Question

当我在Web应用程序中上载图像时，它会显示在侧面，所以我试图使用this module基于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常量的含义。基本上，我对如何在代码中使用此模块感到困惑。我在样本用法部分中查看了示例here，但对于如何使用旋转功能感到困惑。就像我应该将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函数，就像reader.readAsDataURL（myBuffer）？

我也很确定我当前具有jo.rotate函数的位置是错误的，但是由于我不熟悉javascript，所以我不确定放置正确的位置。我感觉它需要在reader.onload函数中使用，但是我不确定该如何处理。

Answer 1

很遗憾，jpeg-autorotate在浏览器中不起作用。您将需要使用exif解析库来提取方向，然后使用css transform:rotate(...)或canvas自己旋转图像。

对于方向解析，我建议exifr。它的速度非常快，可以处理数百张照片，而不会导致浏览器崩溃或花费很长时间：)。另外，还有简洁的API，您可以向其中提供几乎所有内容-元素，URL，Buffer，ArrayBuffer，甚至base64 url​​或字符串等等。