blitter
v2.0.8
Published
Sprite Sheet Helper for the Web
Downloads
23
Maintainers
jamaranteReadme
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-devOnce 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.pngHTML 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) : BooleangetMIME
BLITTER.getMIME (id: String) : StringhasBlob
BLITTER.hasBlob (id: String) : BooleangetBlob
BLITTER.getBlob (id: String) : BlobhasImageData
BLITTER.hasImageData (id: String) : BooleangetImageData
BLITTER.getImageData (id: String) : String
// Example
let img = new Image();
img.setAttribute('src', BLITTER.getImageData('shape-rectangle'));
document.body.appendChild(img);isUsingObjectURLs
BLITTER.isUsingObjectURLs () : BooleanuseObjectURLs
// You should never call this method directly.
BLITTER.useObjectURLs ()parseBuffer
// You should never call this method directly.
BLITTER.parseBuffer (buffer: Array)