Create sprite layout and generate sprite based on it. Heavily inspired by @mapbox/spritezero but with simplified API and sharp replacing mapnik.
$ npm install --save @mapwhit/spriteoneTo 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 }
}ISC © Damian Krzeminski
