如何使用axios渲染EXIF图像数据并在react Js中显示

时间:2019-06-15 14:56:29

标签: javascript reactjs axios exif-js

我正在尝试使用文件夹路径从Google驱动器获取图像, 我正在收到如下图像响应 document.clear

读取和设置组件中图像的代码如下所示:

class FileList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            img: '',
            items: []
        };
    }

    componentDidMount() {
        let path;
        console.log(this);
        var that = this;
        axios.get(Constants.API + Constants.FOLDER_CONTENTS, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "Authorization": Constants.AUTH_Element + ',' + Constants.AUTH_ORG + ',' + Constants.AUTH_USER
            },
            params: {
                path: "/Photos"
            }
        })
            .then(function (response) {
                console.log(response);
                let data = response.data;
                data.forEach((dataInFolder) => {
                    path = dataInFolder.path;
                    that.getImageFromDrive(path)
                });
            })
            .catch(function (error) {
                console.log(error);
            })

    }

    getImageFromDrive = (path) => {
        let that = this;
        let data;

        axios.get(Constants.API + Constants.Files, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "Authorization": Constants.AUTH_Element + ',' + Constants.AUTH_ORG + ',' + Constants.AUTH_USER
            },
            params: {
                path: path
            }
        }).then(function (response) {
            var myThat = that;
            console.log(response);
            let data = response.data;
            var b64Response = btoa(data);
            var sr_Srava = 'data:image/jpeg;base64,' + btoa(unescape(encodeURIComponent(data)));
            that.setState({img: sr_Srava});
        })
            .catch(function (error) {
                console.log(error);
            })
    }


    render() {
        const {img} = this.state;

        return (

            <img className="myImg" alt="" width="300"
                 height="300" src={img}/>


        );

        }
     }
     export default FileList;

我试图将缓冲区数据转换为字符串,并尝试了其他方法。我无法显示图像。有人可以建议如何解析该图像数据以生成图像

0 个答案:

没有答案