https://github.com/mybigday/image-mosaic

Creates an image mosaic with Node
https://github.com/mybigday/image-mosaic

canvas image montage mosaic node

Last synced: 2 months ago
JSON representation

Creates an image mosaic with Node

• Host: GitHub
• URL: https://github.com/mybigday/image-mosaic
• Owner: mybigday
• License: mit
• Created: 2018-02-21T15:04:07.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T13:29:44.000Z (over 1 year ago)
• Last Synced: 2024-09-17T08:27:35.777Z (4 months ago)
• Topics: canvas, image, montage, mosaic, node
• Language: JavaScript
• Size: 3.73 MB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# @fugood/image-mosaic [![Build Status](https://travis-ci.org/mybigday/image-mosaic.svg?branch=master)](https://travis-ci.org/mybigday/image-mosaic) [![NPM version](http://img.shields.io/npm/v/@fugood/image-mosaic.svg?style=flat)](https://www.npmjs.com/package/@fugood/image-mosaic)

Creates an image mosaic,

this package was forked from [`react-image-mosaic`](https://github.com/thejsn/react-image-mosaic) and used [`node-canvas`](https://github.com/Automattic/node-canvas).

## Installation

```bash

$ yarn add @fugood/image-mosaic

```

## Usage

See the [test](src/__tests__/index.spec.js) as usage, you can also refer to [the test fixtures](src/__tests__/) and [image snapshots](src/__tests__/__image_snapshots__).

```js

import mosaic from '@fugood/image-mosaic'

mosaic({

  // The width of the canvas.

  width: 400,

  // The height of the canvas.

  height: 400,

  // The number of columns of images in the mosaic.

  columns: 40,

  // The number of rows of images in the mosaic.

  rows: 40,

  // The amount of blending between each image and its matching color. A number between 0 and 1.

  colorBlending: 0.8,

  // The target image to recreate. Can be a string or an image, the string is assumed to be a url to an image. Expected file buffer.

  target: fs.readFileSync('path/to/image'),

  // An array with urls to images to be used to build the mosaic.

  sources: [

    fs.readFileSync('path/to/image1'),

    fs.readFileSync('path/to/image2'),

  ],

}).then(canvas => {

  const result = canvas.toBuffer()

})

```

See the documentation of [`node-canvas`](https://github.com/Automattic/node-canvas#canvaspngstreamoptions) for more output methods.

## License

[MIT](LICENSE.md)