Как использовать exif- js в реагирующем компоненте? - PullRequest
0 голосов
/ 12 января 2020

Я пытаюсь получить 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. Как использовать window.onload в реагирующем компоненте?

- edit -

Я изменил свой код на это, но все еще не определен для ориентации:

    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 Ответ

1 голос
/ 12 января 2020

exif-js обеспечивает общий JS эквивалент. Если EXIF ​​не определен, вам просто нужно импортировать его:

import EXIF from 'exif-js'

Пример: codesandbox .

Чтобы проверить данные EXIF ​​изображения, вы можете проверить этот веб-сайт.

Вы можете проверить с этим изображением: http://fredericiana.com/media/2013/monalisa.jpg

...