react-image-parser

React component for extracting data from an image.
React

Features:

Get data from image;
Get size of image;

Installation

Download directly fromGitHub or install vianpm.

npm i react-image-parser

Props

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

Usage

1. Image data

Examples of working with image data.

1.1. Get image data

In this example we get data from image. The image looks like this (enlarged version):

This image is a series of 16 pixels of different colors and transparency. If you look at the extracted data, it’s just a sequence of numbers in which pixel display parameters are encoded. Each pixel is drawn by four parameters: red, green, blue, alpha.

import React from 'react';
import ReactDOM from 'react-dom';
import ImageParser from 'react-image-parser';

import demoImg from './path/to/demo/img.png';

const onImageParsed = ({ data }) => console.log(data);

ReactDOM.render(
    <ImageParser
        img={demoImg}
        onImageParsed={onImageParsed}
    />,
    document.querySelector('.demoContainer')
);

1.2. Maximum image side size

In this example, we will limit the maximum size of the side of the image by passing the parameter maxImgSideSize equal to 10.
As a result, we will get slightly distorted data, because when we draw an image that is larger than the canvas itself, we lose some information. You can compare the result of this example with the previous result.

import React from 'react';
import ReactDOM from 'react-dom';
import ImageParser from 'react-image-parser';

import demoImg from './path/to/demo/img.png';

const onImageParsed = ({ data }) => console.log(data);

ReactDOM.render(
    <ImageParser
        img={demoImg}
        maxImgSideSize={10}
        onImageParsed={onImageParsed}
    />,
    document.querySelector('.demoContainer')
);

2. Image size

Examples of working with image size.

2.1. Get image size

In this example, we will determine the size of the image used in the examples.
As you remember, its size is 16 pixels wide and 1 pixel high.

import React from 'react';
import ReactDOM from 'react-dom';
import ImageParser from 'react-image-parser';

import demoImg from './path/to/demo/img.png';

const onImageParsed = ({ size }) => console.log(size);

ReactDOM.render(
    <ImageParser
        img={demoImg}
        onImageParsed={onImageParsed}
    />,
    document.querySelector('.demoContainer')
);