nitin42 / react-imgpro

📷 Image Processing Component for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ProcessImage doesn't seem to rerender

thecomputerguyjeff opened this issue · comments

When we run this sample code, both Images are initially set to "Scott". The "Original Image" then quickly changes to the image loaded in from the database, but the "New Image" (the ProcessImage) stays as "Scott". (It also doesn't change the brightness of the image, and processedImage never seems to kick off)
We have tried this with storage={false} also and it didn't change the results.

`

import React, {Component} from 'react';
import './App.css';
import ProcessImage from 'react-imgpro'
import Scott from './assets/images/Scott-Happy.jpg'

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            originalImage: Scott,
            src: '',
            err: null,
            photos: [],
            retrievePhotosLoading: false,
            loadedImage: Scott,
        }
    }

    async componentDidMount() {
        try {
            const photosRetrieved = await fetch('https://localhost:8080/api/v1/images/ASDF')
            const photosJson = await photosRetrieved.json()
            this.setState({
                photos: photosJson,
                getPhotoDataComplete: true,
                loadedImage: window.atob(photosJson[0].photoData)
            })
        } catch (error) {
            console.log(error)
        }
    }

    render() {
        return (
            <div>
                <h1>This is our imgPro Test Playground</h1>
                <br/><br/>

                <b>Original Image</b>
                <br/>
                <img src={this.state.loadedImage} alt="Scott is REALLY happy"/>
                <br/><br/>
                <b>New Image:</b>
                <br/>
                <ProcessImage
                    image={this.state.loadedImage}
                    brightness={.8}
                    // processedImage={(src, err) => this.setState({src, err,})}
                />
            </div>
        );
    }
}

export default App;

`

Can you show me the output of your browser console?

In 1.3.7 you can use re-render feat