my code
<ProcessImage image={imageSrc} resize={{ width: 400 }} rotate={{ degree: 90 * this.state.rotate }} processedImage={(src, err) => this.setState({ src, err})} />
when the degree is 90 or 180,origin image's width would be current image's height.
I noticed that api doc
rotate
rotate the image
Example -

<ProcessImage image={image} rotate={{ degree: 75, mode: 'bilinear' }}
Optionally, a resize mode can be passed. If false is passed as the second parameter, the image width and height will not be resized.

But i do not kown how to pass the parameter, can you give me a example??

Any plans to support in the future?

Version: 1.3.9
NPM version: 6.2.0
Node version: 10.8.0

I'm getting this error while using this plugins with Next.js.

Is it possible that we update the libs?

When i render the img, and i log the the the src - (base64) - it is there, but not rendered. After a long time, the console show me again the log with the base64 and than it is rendered...?

What can i do?

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;

`

hi
i have a confusion in using this lib which we cant update the component by change the some options dynamic？

if i miss something, please point me out , think you !!!
i create a sanBox

component will re-render by size changed but did not work by other config

btw the the work import cdn file break by china GFW emmm , so it can be set in config will be flexible

Great piece of software!
How would I go about making three (... more) copies of different sizes of the same image? Before, for example, an s3 upload ... ?
Thanks!

Server rendering yields:

ReferenceError: window is not defined

related #10 code be formatting in workspace , it is difficult to review

• Use greenlet or others integrating workers lib
• use jimp implement filter params on https://github.com/picturepan2/instagram.css/tree/master/src
• Convert React new life cycle Api
• Updated Webpack to v4 and babel to v7

Hi please find my below code

import React, { Component } from 'react';
import ProcessImage from 'react-imgpro';
import { IMG_APP_LOGO } from '../images';

class CamFilter extends React.Component {
state = {
src: '',
err: null
}

render() {
  return (
    <ProcessImage
      image={IMG_APP_LOGO}
      resize={{ width: 500, height: 500 }}
      colors={{
        mix: {
          color: 'mistyrose',
          amount: 20
        }
      }}
      processedImage={(src, err) => this.setState({ src, err})}
    />
  )
}

}

export default CamFilter;

i am getting following error
invariant violation: view config getter callback for component 'img' must be a function

Here are some example of filter so we can use all below by passing props true and false
F1977
Amaro
Brannan
Earlybird
Hefe
Hudson
Inkwell
Lokofi
LordKelvin
Nashville
Normal
Rise
Sierra
Sutro
Toaster
Valencia
Walden
XproII

Here is my code and i want to change greyscale to true on button click using function that.editType('greyscale')

import React, { Component } from 'react';
import ProcessImage from 'react-imgpro';
import styles from '../style.scss';

const style = {
container:{
display:'flex',
alignItems:'center',
height:'100%'
},
itemContainer:{
left:0
},
bgImgaesContainer:{
width:'100%',
left:0
}
}

class PostEditImage extends Component{

state = {
src: '',
err: null,
greyscale:false
}

editType=(type)=>{
switch(type){
case 'greyscale':
this.setState({greyscale:true})
break;
}
}

render(){
var w = window.innerWidth;
var that =this;
return(

  />
  <div style={style.bgImgaesContainer} className={`${styles.bgImgaesContainer} ${styles.width90}`}>
    <div style={style.itemContainer} className={styles.itemContainer}>
          <div onClick={(e)=>that.editType('greyscale')} style={{backgroundColor:'#000'}} className={`${styles.item} ${styles.item1}`}>
            greyscale
          </div>
          <div onClick={(e)=>that.editType('greyscale')} style={{backgroundColor:'#a52a2a'}} className={`${styles.item} ${styles.item2}`}>
            2
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#d2691e'}} className={`${styles.item} ${styles.item3}`}>
            3
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#0000ff'}} className={`${styles.item} ${styles.item4}`}>
            4
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#e9967a'}} className={`${styles.item} ${styles.item5}`}>
            5
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#556b2f'}} className={`${styles.item} ${styles.item5}`}>
            6
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#cd5c5c'}} className={`${styles.item} ${styles.item5}`}>
            7
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#800000'}} className={`${styles.item} ${styles.item5}`}>
            8
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#f96332'}} className={`${styles.item} ${styles.item5}`}>
            9
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#c0c0c0'}} className={`${styles.item} ${styles.item5}`}>
            7
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#4682b4'}} className={`${styles.item} ${styles.item5}`}>
            8
          </div>
          <div onClick={(e)=>that.editType()} style={{backgroundColor:'#006400'}} className={`${styles.item} ${styles.item5}`}>
            9
          </div>
    </div>
  </div>  
</div>

Hello!

I need to access reference of the rendered img component. It is impossible right now.

We have 2 options:

• Add new prop innerRef/imgRef/etc which will be passed to img component
• Use React 16 forwardRef API to pass ref to the rendered img component

What do you think? Since this component is rendering img component directly, I think the second solution will be more appropriate.

It would be really handy to be able to use base64 as the image instead of a URL... do you know of a way to do this?

This looks amazing and I'd really love to be able to use it.

Thanks.

Does this library support receiving images as blobs?

While rendering, the ProcessImage component has a strange behavior. It displays the same image on a map loop during a second. As if it populates each item with the first image loaded and processed and then only displays the correct image.
On a classical <img> tag, I don't have this behavior.

render() {
    const { products } = this.state;
    return (
      <div className="page">
        {products.map(product => 
          <div className="productGrid" key={product.objectID}>
            <h1>{product.title}</h1>  
            <ProcessImage
              image={product.imageUrl}
              resize={{ width: 200, height: 200 }}
               />
            <p>{product.description}</p>
            <p>Price: {product.price}</p>
          </div>
        )}
      </div>
    );
  }

I get a bunch of annoying errors in the console like:
Uncaught Error: HTTP Status 404 for url http://localhost:3000/uploads/book/image/15/IMG-20171002-WA0012.jpg
at XMLHttpRequest.xhr.onload (jimp.min.js:27)

What does it suppose to mean?

Hello there, After npm install --save react-imgpro i got

Module not found: Can't resolve './build/main.js' in '.../node_modules/react-imgpro'
Thanks!

package.json :
"react": "16.3.1",
"react-imgpro": "^1.3.9",
"react-native": "0.55.4",

I am getting the following error when trying to import this library:

**A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
{ presets: [{option: value}] }
Valid:
{ presets: [['presetName', {option: value}]] }**

I'm receiving the error:

Mixed Content: The page at 'blob:https://mysecuredomain.com/053ee38d-3f6c-4498-8b44-78164f266038' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://cors-anywhere.herokuapp.com/https://mycdn.com/1535123777.png'. This request has been blocked; the content must be served over HTTPS.

This issue seems to be caused by using cors-anywhere on http on an https domain. Is there somewhere to configure cors-anywhere to use https?

I believe this is also causing jimp to throw an exception:

Uncaught Error: Uncaught, unspecified "error" event. ([object ProgressEvent])
at Jimp.EventEmitter.emit (jimp.min.js:27)
at Jimp.emitMulti (jimp.min.js:27)
at Jimp.emitError (jimp.min.js:27)
at jimp.min.js:27

Thanks for your time.