❤
npm
Sign UpSign In

blitter

2.0.8 • Public • Published

blitter

Sprite Sheet Helper for the Web

 

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install blitter --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('blitter');

 

Task

Run this task with the grunt blitter command.

Task targets, files and options may be specified according to the Grunt Configuring tasks guide.

 

Description

blitter is a task that helps reduce the amount of HTTP requests for images in websites, and provide an easier way to work with images by not having to deal with CSS backgrounds.

 

Usage Example

grunt.config.init({
    blitter: {
        demo: {
            src: ['media/img/blit/demo/'], // Must be directories.
            dest: 'dist/vendor/demo-buffer.blit.js'
        }
    }
});

options.useObjectURLs
Type: Boolean
Default: true

More efficient handling of image data by creating an object URL for each data URI. Blobs are created only when using object URLs.

 

Client-Side

You can download the latest client-side script here.

blit-id

blit-ids are declared as attributes inside <img> elements. They serve as references to the image data you want to render. File names without their extension are used as blit-ids. All file names must be unique, if not the image elements will render the image data tied to the blit-id that got stored first.

srcDir
├─── menu
│    │   menu-drop-down-icon.svg
│    └─  menu-hamburger-icon.svg
│
├─── shape
│    │   shape-triangle.svg
│    └─  shape-rectangle.svg
│
└─── user-profile
     │   user-profile-admin.png
     └─  user-profile-member.png

HTML Page

Always load blitter after all of the img elements using blit-ids have been parsed. It's not a bad idea to load buffers before loading other scripts.

<html>
<head>
    <title>Blitter Demo</title>
</head>
<body>
    <img blit-id="menu-hamburger-icon">
    <ul>
        <li><img blit-id="user-profile-admin"></li>
        <li><img blit-id="user-profile-member"></li>
    </ul>
    <script src="js/vendor/blitter.min.js"></script> 
    <script src="js/vendor/demo-buffer.blit.js"></script> 
</body>
</html>

 

API

hasMIME

BLITTER.hasMIME (id: String) : Boolean

getMIME

BLITTER.getMIME (id: String) : String

hasBlob

BLITTER.hasBlob (id: String) : Boolean

getBlob

BLITTER.getBlob (id: String) : Blob

hasImageData

BLITTER.hasImageData (id: String) : Boolean

getImageData

BLITTER.getImageData (id: String) : String
 
// Example
let img = new Image();
 
img.setAttribute('src', BLITTER.getImageData('shape-rectangle'));
 
document.body.appendChild(img);

isUsingObjectURLs

BLITTER.isUsingObjectURLs () : Boolean

useObjectURLs

// You should never call this method directly.
BLITTER.useObjectURLs ()

parseBuffer

// You should never call this method directly.
BLITTER.parseBuffer (buffer: Array)

Readme

Keywords

Package Sidebar

Install

npm i blitter

Repository

github.com/jeanamarante/blitter

Homepage

github.com/jeanamarante/blitter#readme

Weekly Downloads

1

Version

2.0.8

License

MIT

Unpacked Size

12.1 kB

Total Files

5

Last publish

Collaborators

  • jamarante
Try on RunKit
Report malware