在javascript中基于exif方向旋转图像答案

【问题标题】：Rotating an image based on exif orientation in javascript在javascript中基于exif方向旋转图像
【发布时间】：2020-01-04 02:38:19
【问题描述】：

我需要根据客户端/浏览器端的 exif 数据旋转图像。我找到了这个link，但是当我尝试在我的网络应用程序中实现它时，图像没有显示在画布上。

这是我的代码：

<template>
  <div :class="$style.form247">
    <Canvas :url="image" :value="value" @input="$emit('input', $event)" />
      <div :class="$style.file">
      Choose file
      <input id='input123' :class="$style.input" type="file" @change="onFileUpload">
    </div>
  </div>
</template>


<script>

import Canvas from './Canvas'


function getOrientation(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {

        var view = new DataView(e.target.result);
        if (view.getUint16(0, false) != 0xFFD8)
        {
            return callback(-2);
        }
        var length = view.byteLength, offset = 2;
        while (offset < length) 
        {
            if (view.getUint16(offset+2, false) <= 8) return callback(-1);
            var marker = view.getUint16(offset, false);
            offset += 2;
            if (marker == 0xFFE1) 
            {
                if (view.getUint32(offset += 2, false) != 0x45786966) 
                {
                    return callback(-1);
                }

                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;
                for (var i = 0; i < tags; i++)
                {
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                    {
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
                    }
                }
            }
            else if ((marker & 0xFF00) != 0xFF00)
            {
                break;
            }
            else
            { 
                offset += view.getUint16(offset, false);
            }
        }
        return callback(-1);
    };
    reader.readAsArrayBuffer(file);

}

export default {
  props: ['value'],
  components: {
    Canvas
  },
  data() {
    return {
      image: null
    }
  },
  methods: {
    onFileUpload(event) {
      const selectedFile = event.target.files[0];
      getOrientation(selectedFile, function(orientation) {  
      //alert('orientation: ' + orientation);
    });


    }
  }
}
</script>

但是，当我查看控制台时，我确实看到方向正在返回，但由于某种原因，图像不再显示在画布中。

我是 javascript 新手，所以也许我在这里遗漏了一些东西。

【问题讨论】：

标签： javascript image canvas exif image-rotation

【解决方案1】：

很高兴自己尝试提取方向。但我建议使用图书馆来做到这一点。我了解自己，因为我在过去的两年里一直在写 exifr 并修复所有错误、边缘情况、格式奇怪的元数据等......

有一个简单的定向 API：

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

【讨论】：