我试图获取在react中使用输入标签上传的图像的exif元数据,并将以下函数附加到输入标签的属性“onChange”:
onChange(e) {
const { input: { onChange } } = this.props;
let img_arr = [];
for (let i = 0; i < e.target.files.length; i++) {
const file = e.target.files[i];
console.log('exif data');
console.log(EXIF.getData(file, () => {
var orientation = EXIF.getTag(this, "Orientation");
console.log('orientation');
console.log(orientation);
}));
img_arr.push({file: file, url: URL.createObjectURL(file)});
}
//console.log("printing img arr");
//console.log(img_arr);
onChange(img_arr);
}
但是,我发现 EXIF 未定义。在exif-js页面,建议使用window.onload。 https://github.com/exif-js/exif-js 。如何在 React 组件中使用 window.onload ?
--编辑--
我将代码更改为这样,但方向仍然未定义:
onChange(e) {
const { input: { onChange } } = this.props;
let img_arr = [];
for (let i = 0; i < e.target.files.length; i++) {
const file = e.target.files[i];
console.log('exif data');
EXIF.getData(file, function() {
const url = URL.createObjectURL(file);
const image = new Image();
image.onload = function() {
URL.revokeObjectURL(url);
const orientation = EXIF.getTag(this, 'Orientation');
console.log(orientation);
};
image.src = url;
});
img_arr.push({file: file, url: URL.createObjectURL(file)});
}
onChange(img_arr);
}
最佳答案
exif-js
提供了 CommonJS 的等效项。如果 EXIF 未定义,您只需导入它:
import EXIF from 'exif-js'
示例:codesandbox .
要验证图像的 EXIF 数据,您可以检查 this网站。
您可以使用此图像进行测试:http://fredericiana.com/media/2013/monalisa.jpg
关于javascript - 如何在 React 组件中使用 exif-js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59703859/