nitin42 / react-imgpro

📷 Image Processing Component for React
2.18k stars 83 forks source link

ProcessImage doesn't seem to rerender #6

Closed thecomputerguyjeff closed 6 years ago

thecomputerguyjeff commented 6 years ago

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;

`

nitin42 commented 6 years ago

Can you show me the output of your browser console?

Sunshine168 commented 6 years ago

In 1.3.7 you can use re-render feat