React image parser component

React image parser component

With this component you can easily parse the image data.

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.

Github Repository

Tags: #React #Images