Generating Custom Image Placeholders with Pure JavaScript – placeholder.js

Category: Image , Javascript | December 18, 2015
Author: hustcc
Views Total: 1,519
Official Page: Go to website
Last Update: December 18, 2015
License: MIT

Preview:

Generating Custom Image Placeholders with Pure JavaScript – placeholder.js

Description:

placeholder.js is a really small JavaScript library used to generate customizable, CSS only placeholders for images.

How to use it:

Put the placeholder.js JavaScript file into your webpage when needed.

<script src="placeholder.js"></script>

Customize the image placeholder.

var opts = {
    size: '1024x1024',
    text: 'Hello World'
  }

Generate a 1024x1024px placeholder image.

document.getElementById('selector').setAttribute('src', window.placeholder.getData(opts));

Full options.

var opts = {
    
    // image size
    size: '128x128',

    // background color
    bgcolor: '#ccc', 

    // text color
    color: '#969696', 

    // custom text
    text: 'Hello World', 

    // custom font styles
    font: {
        style:'oblique', 
        weight: 'bold',
        size:'40',
        family: 'consolas'
  },

}

API methods.

// get the image base64 
window.placeholder.getData(opts); 

// get the image canvas element
window.placeholder.getCanvas(opts);

Leave a Reply