react-image-mosaic

Creates an image mosaic in a canvas element.

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.

License

The MIT License (MIT)