使用 Jpeg-autorotate npm 模块基于 EXIF Data javascript 旋转图像答案

【问题标题】：Using Jpeg-autorotate npm module to rotate image based on EXIF Data javascript使用 Jpeg-autorotate npm 模块基于 EXIF Data javascript 旋转图像
【发布时间】：2020-04-21 15:37:54
【问题描述】：

当我在我的网络应用程序中上传图像时，它会横向显示，因此我尝试使用 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 函数，但我不知道如何去做。

【问题讨论】：

我希望 jpeg-autorotate 只在后端（Nodejs）中运行。如果您需要客户端exif，请通过以下链接stackoverflow.com/questions/20600800/…
jpeg-autorotate 在浏览器中不起作用。见评论here。
@RobC 谢谢，我没有意识到它在浏览器上不起作用。

标签： javascript image npm onload exif

【解决方案1】：

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

对于方向解析，我推荐exifr。它速度很快，可以处理数百张照片而不会导致浏览器崩溃或花费很长时间:)。此外，还有简洁的 API，您可以为它提供几乎任何东西 - 元素、URL、缓冲区、ArrayBuffer，甚至是 base64 url 或字符串等等。

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

这会为您提供一个从 1 到 8 的整数（了解有关 these values here 的更多信息）

【讨论】：