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)

    Install

    npm i blitter

    DownloadsWeekly Downloads

    50

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • jamarante