Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React-Image-Parser

With this component you can easily parse the image.

Features:

  • get image data;
  • get image size.

Install:

npm i react-image-parser

Add:

import ImageParser from 'react-image-parser';

Use:

<ImageParser
    img={'./path/to/image'}
    maxImgSideSize={400}
    onImageParsed={data => console.log(data)}
/>

Props:

Name Type Required Default Description
img String Yes null Path to image. For example, './my/image/path.png'
maxImgSideSize Number No bigger side of image The maximum size of the sides of the canvas on which the image will be parsed.
onImageParsed Function No null The function in which the image parsing result will be passed.

Result Structure:

{
    data: Uint8ClampedArray(64) [255, 202, 0, 134, 205, 159...], // image data
    size: { width: 100, height: 200 } // image size
} 

Demo:

For more information and examples check the demo page.