Merge pull request #29 from Sunshine168/refSupport

feat:add get image ref support

Author: Sunshine168

Docs/Api.md

@@ -469,3 +469,18 @@ a callback on process finished
   }}
 />
 ```
+
+### getImageRef
+
+**Type** - `function`
+
+**Example** -
+
+get image ref 
+
+```jsx
+<ProcessImage
+  image={src}
+  getImageRef={image=>this.image=image}
+/>
+```

README.md

@@ -19,20 +19,21 @@
 **Example**
 
 ```jsx
+
+const mix = {
+    color: 'mistyrose',
+    amount: 10
+}
+
 class App extends React.Component {
   state = { src: '', err: null }
-  
   render() {
-    const params = {
-      mix: {
-        color: 'mistyrose',
-        amount: 10
-       }
-    }
     return (
       <ProcessImage
         image='http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg'
-        colors={params}
+        colors={{
+          mix
+        }}
         resize={{ width: 500, height: 500, mode: 'bilinear' }}
         processedImage={(src, err) => this.setState({ src, err, })}
       />     

public/App.js

@@ -33,6 +33,7 @@ class App extends Component {
               amount: this.state.mixAmount
             }
           }}
+          getImageRef={element => (this.image = element)}
         />
         <button
           disabled={this.state.isProcessing}
@@ -57,6 +58,13 @@ class App extends Component {
         >
           test2
         </button>
+        <button
+          onClick={() => {
+            console.log(this.image);
+          }}
+        >
+          log ImageRef
+        </button>
       </div>
     );
   }

src/components/ProcessImage.js

@@ -146,8 +146,8 @@ class ProcessImage extends Component {
 
   worker = null;
 
-  processedImage = (image, restProps, style) => (
-    <img src={image} {...restProps} style={style} />
+  processedImage = (image, restProps, style, getImageRef) => (
+    <img src={image} {...restProps} style={style} ref={getImageRef} />
   );
 
   placeholderImage = image =>
@@ -161,7 +161,12 @@ class ProcessImage extends Component {
       placeholder={this.placeholderImage(props.image)}
     >
       {image =>
-        this.processedImage(image, restProps, this.getDefaultImageSize(props))
+        this.processedImage(
+          image,
+          restProps,
+          this.getDefaultImageSize(props),
+          props.getImageRef
+        )
       }
     </ProgressiveImage>
   );

src/utils/propsFactory.js

@@ -82,6 +82,7 @@ const getImageProps = props => {
     disableRerender,
     customCdn,
     onProcessFinish,
+    getImageRef,
     ...rest
   } = props;
 

src/validators/props.js

@@ -94,7 +94,8 @@ const MainPropTypes = {
   scaleToFit: scaleToFitPropType,
   disableRerender: PropTypes.bool,
   customCdn: PropTypes.string,
-  onProcessFinish: PropTypes.func
+  onProcessFinish: PropTypes.func,
+  getImageRef: PropTypes.func
 };
 
 export default MainPropTypes;