@mapwhit/spriteone v0.1.0

@mapwhit/sprite

Create sprite layout and generate sprite based on it. Heavily inspired by @mapbox/spritezero but with simplified API and sharp replacing mapnik.

Install

$ npm install --save @mapwhit/spriteone

Usage

To generate sprite from images of various sizes:

const so = require('@mapwhit/spriteone');

const imgs = [
  {
    id: 'id_1',                  // unique id of an image
    img: '/path/to/image.png',   // or a buffer - passed to sharp-object
    dim: { width, height }
    resize: false                // optional - if truthy image will be resized to cover `dim`
  }
];
const { layout, sprite } = await so.create(imgs, {
  format: 'png'                  // optional - passed to `sharp.toFormat()`
});

To generate grid sprite (if all the images are that same size):

// or: if all the images have the same size...

const { layout, sprite } = await so.createGrid(
  imgs,
  {
    dim: { width: 10, height: 15 },
    columns: 12,       // desired number of columns in the grid              
    format: 'png'      // optional - passed to `sharp.toFormat()`
  }
);

Result is an object with sprite and layout - sprite is an image that can be written to file, and the resulting layout can be used to generate CSS files etc:

 {
    id_1: { x, y, width, height } 
    id_2: { x, y, width, height } 
    id_3: { x, y, width, height } 
 }

License

ISC © Damian Krzeminski