如何在react组件中使用exif-js？
如何在react组件中使用exif-js？
提问于 2020-01-12 12:36:16
我正在尝试获取在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);
}回答 1
Stack Overflow用户
发布于 2020-01-12 13:06:51
exif-js提供了CommonJS等效项。如果没有定义EXIF，你只需要导入它：
import EXIF from 'exif-js'示例：codesandbox。
要验证图像的EXIF数据，您可以查看this网站。
您可以使用以下图像进行测试：http://fredericiana.com/media/2013/monalisa.jpg
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59703859
复制相关文章
相似问题
React列表组件(如filemanager)
React组件名称，如BEM
如何在react.js中创建自己的按钮组件(如antdesign )
React:返回ui组件(如toast)的服务？
如何在react组件中使用样式组件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
