[英]How to use exif-js in a react Component?
I am trying to get the exif metadata of an image that is uploaded with an input tag in react, and have the following function attached to the input tag's property "onChange":我正在尝试获取在反应中使用输入标签上传的图像的 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);
}
However, I get EXIF is not defined.但是,我得到的 EXIF 没有定义。 On the exif-js page, it is suggested to use window.onload.在exif-js页面,建议使用window.onload。 https://github.com/exif-js/exif-js . https://github.com/exif-js/exif-js 。 How does one use window.onload in a react component?如何在 React 组件中使用 window.onload?
-- edit -- - 编辑 -
I changed my code to this, but still get undefined for orientation:我将代码更改为此,但仍然未定义方向:
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
provides an CommonJS equivalent. exif-js
提供了一个 CommonJS 等价物。 If EXIF is not defined you just need to import it:如果未定义 EXIF,则只需导入它:
import EXIF from 'exif-js'
Example: codesandbox .示例:代码沙盒。
To validate the EXIF data of the image you can check this website.要验证图像的 EXIF 数据,您可以查看此网站。
You can test with this image: http://fredericiana.com/media/2013/monalisa.jpg您可以使用此图像进行测试: http : //fredericiana.com/media/2013/monalisa.jpg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.