Generating Custom Image Placeholders with Pure JavaScript – placeholder.js

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);