react-image-parser 🔬

React компонент для извлечения данных с изображения.
Reactnpm version

Features:

  1. Get data from image;
  2. Get size of image;

Installation

Download directly from GitHub or install via npm.

npm i react-image-parser

Props

NameDefaultDescription
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.

JS
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.

JS
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.

JS
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')
);