image-mosaic

Set mosaic to image by canvas. Demon Page

Install

npm install image-mosaic

Usage

    import Mosaic from 'image-mosaic';

    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');

    const mosaic =  new Mosaic(ctx, {
        tileWidth: 10,
        tileHeight: 10,
        brushSize: 3,
    });

    // Mosaic on full image.
    mosaic.drawAllTiles();

Instance property

{
    context, // canvas context.
    imageData, // canvas image data.
    width, // canvas width.
    height, // canvas height.
    tileWidth,
    tileHeight,
    tileRowSize, // tile count in a row.
    tileColumnSize, // tile count in a column.
    tiles: [ // tiles.
        {
            row, // tile row position.
            column, // tile column position.
            pixelWidth, // tile pixel number.
            pixelHeight, // tile pixel number.
            data, // tile data.
            color,
            isFilled,
        }, ...
    ]
}

Methods

    mosaic.drawTile(tiles);

    mosaic.drawTileByPoint(x, y);

    mosaic.getTilesByPoint(x, y, isBrushSize);

    mosaic.drawAllTiles();

    mosaic.eraseTile(tiles);

    mosaic.eraseTileByPoint(x, y, isBrushSize);

    mosaic.eraseAllTiles();