https://github.com/wildhoney/legofy

Legofy your images with retina support using SVG.
https://github.com/wildhoney/legofy

canvas lego legofy

Last synced: 3 months ago
JSON representation

Legofy your images with retina support using SVG.

• Host: GitHub
• URL: https://github.com/wildhoney/legofy
• Owner: Wildhoney
• License: other
• Created: 2015-11-08T22:18:30.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-12-07T11:02:34.000Z (over 7 years ago)
• Last Synced: 2025-03-31T11:05:37.994Z (3 months ago)
• Topics: canvas, lego, legofy
• Language: JavaScript
• Homepage: http://legofy.herokuapp.com/
• Size: 3.95 MB
• Stars: 301
• Watchers: 12
• Forks: 19
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Legofy

> Based entirely on [the Python implementation](https://github.com/JuanPotato/Legofy).

![Travis](http://img.shields.io/travis/Wildhoney/Legofy.svg?style=flat-square)

 

![npm](http://img.shields.io/npm/v/legofy.svg?style=flat-square)

 

![License MIT](http://img.shields.io/badge/License-MIT-lightgrey.svg?style=flat-square)

 

[![Heroku](https://img.shields.io/badge/web-Heroku-blue.svg?style=flat-square)](http://legofy.herokuapp.com/)

* **npm:** `npm install legofy --save`

*  **See:** [`angular-legofy`](https://github.com/ByJC/angular-legofy).

![Screenshot](media/screenshot.png)

## Getting Started

Simply `import` the `transform` function from the Legofy module, and then invoke it by passing in your `img` element.

```javascript

import {transform} from 'legofy';

// ...

const imgElement = document.querySelector('img');

transform(imgElement);

```

## Options

### Brick Size

You can adjust the size of the bricks by using the second argument of the `transform` function — by default the `factor` is `0.05`.

```javascript

// ...

// Make the bricks twice the size of the default.

transform(imgElement, { factor: 0.1 });

// ...Or make them twice as small!

transform(imgElement, { factor: 0.025 });

```

As the brick isn't currently SVG — [see ticket](https://github.com/Wildhoney/Legofy/issues/5) — larger bricks will look blurry.

### Blend Mode

You can also change the `mix-blend-mode` value using the second argument — the default is `overlay` however `screen`, `darken`, `color-burn`, `hard-light`, `soft-light` all look good as blend modes.

```javascript

// ...

// Change bricks to a more pastel colour.

transform(imgElement, { blendMode: 'screen' });

```

## Re-rendering

By default when the window is resized no re-rendering will occur — it's entirely up to the developer to invoke `transform` again – and thankfully the `transform` function is idempotent.

```javascript

import {throttle} from 'lodash';

import {transform} from 'legofy';

// ...

const imgElement = document.querySelector('img');

transform(imgElement);

//  ...

addEventListener('resize', throttle(() => transform(imgElement), 250));

```

## Browser Support









Tested with Chrome 46.0, Firefox 42.0, Safari 9.0.1, Opera 33.0.