如何从 img 标签获取 EXIF 方向

Question

我正在尝试从img标签中获取EXIF数据，但它尚未定义。

这是我的代码

const newimg = document.getElementById('campic');
getExif(newimg) {
if(newimg){
EXIF.getData(newimg, function() {
var orientation = EXIF.getTag(this, "Orientation");
console.log("orientation",orientation);
if(orientation == 6) {
newimg.className = "camview rotate90";
} else if(orientation == 8) {
newimg.className = "camview rotate270";
} else if(orientation == 3) {
newimg.className = "camview rotate180";
}
});
}
};

<Img src={this.state.new_item.image_placeholder} id="campic" class="camview"/>

Answer 1

检查图像的 EXIF 数据是否来自 http://exif.regex.info/exif.cgi

然后你可以做一个 React 组件，比如：

import React from "react";
import EXIF from "exif-js";
function ImageMeta() {
function handleChange({
target: {
files: [file]
}
}) {
if (file && file.name) {
EXIF.getData(file, function() {
var exifData = EXIF.pretty(this);
if (exifData) {
console.log(exifData);
console.log(EXIF.getTag(this, "Orientation"));
} else {
console.log("No EXIF data found in image '" + file.name + "'.");
}
});
}
}
return (
<input
type="file"
id="file"
accept=".jpg, .png, .heif, .heic"
onChange={handleChange}
/>
);
}
export default ImageMeta;

这是Stackblitz演示，如果你想看到它的实际效果。