Image Generator

Size: x
Bgcolor:
Color:
Fstyle:
Fweight:
Fsize:
Ffamily:
Text:

Usage

Include placeholder.js in your HTML:
<script src="placeholder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img class="placeholder" />
or with options setting:
<img options="size=256x128&text=Hello!" class="placeholder" />
Programmatic use API to process image with a specific src attribute, like this one:
<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">
Programmatic use API to process image: placeholder.getData(opts)
<img id="img_holder" src="">
<script type="text/javascript">
var opts = {
size: '256x128',
font: {
style: 'oblique',
},
text: 'Hello=&World'
};
document.getElementById('img_holder').setAttribute('src', window.placeholder.getData(opts));
</script>