React-image-mosaic NPM

react-image-mosaic

Creates an image mosaic in a canvas element.

Image mosaic example

Installation

npm i react-image-mosaic

Basic Usage

import { ReactImageMosaic } from 'react-image-mosaic'

<ReactImageMosaic
    width={ 400 }
    height={ 400 }
    sources={ ['path/to/image.jpg', 'path/to/image2.jpg'] } 
    target={ 'path/to/image.jpg' }
/>

Examples

Interactive example with loader - source

Settings

ReactImageMosaic has the following props:

prop	default	description
`width`	400	The width of the canvas.
`height`	400	The height of the canvas.
`columns`	40	The number of columns of images in the mosaic.
`rows`	40	The number of rows of images in the mosaic.
`colorBlending`	0.8	The amount of blending between each image and its matching color. A number between 0 and 1.
`target`	null	The target image to recreate. Can be a string or an image, the string is assumed to be a url to an image.
`sources`	[]	An array with urls to images to be used to build the mosaic.
`crossOrigin`		The crossorigin attribute passed to images that are loaded. Read more here
`onClick`		A function that is called when user clicks on the canvas. Receives some information about the image clicked.
`onLoadProgress`		A function called every time a source image has loaded. Receives the progress as a number between 0 and 1.