Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-image-parser with all npm packages installed. Try it out:

require("react-dom/package.json"); // react-dom is a peer dependency. require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var reactImageParser = require("react-image-parser")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-image-parser v2.0.2

React image parser component

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:

NameTypeRequiredDefaultDescription
imgStringYesnullPath to image. For example, './my/image/path.png'
maxImgSideSizeNumberNobigger side of imageThe maximum size of the sides of the canvas on which the image will be parsed.
onImageParsedFunctionNonullThe 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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free