legofy

    0.1.13 • Public • Published

    Legofy

    Based entirely on the Python implementation.

    Travis   npm   License MIT   Heroku

    Screenshot

    Getting Started

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

    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.

    // ...
     
    // 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 — 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.

    // ...
     
    // 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.

    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.

    Keywords

    Install

    npm i legofy

    DownloadsWeekly Downloads

    2

    Version

    0.1.13

    License

    MIT

    Last publish

    Collaborators

    • avatar