placeholderable

placeholderable is a simple and lightweight JavaScript library that generates placeholder images on the client side.

Setup

Just only include the following code in the head section of your HTML file.

<script src="https://cdn.jsdelivr.net/gh/TetsuakiBaba/placeholderable@main/placeholderable.js" crossorigin="anonymous" type="text/javascript"></script>

If you are dynamically generating img tags using javascript or other methods, call the placeholderable() function after the DOM generation is complete. placeholderable() function checks all img tags and returns the corresponding part in the canvas replace the corresponding part with the canvas.

Usage

By inserting a space in the src attribute, <img src=" "> or <video poster=" "> (needs a space!!), within the img tag, you can indicate that the img is an image insert for use by the placeholderable. Options such as color, text, etc. can be added after the space with "?" symbol after the space.

Copy and paste the following sample code anywhere you like in the body tag of your HTML file to see how it works.

If no parameters are specified, the default values are as follows


const defaultWidth = 200;
const defaultHeight = 100;
const defaultText = `${defaultWidth}x${defaultHeight}`; 
const defaultBgColors = ['#F2529D', '#A99CD9', '#9080F2', '#05F2F2', '#F2CB05']; 
const defaultTextColors = ['#EEEEEE'];

example	copy	HTML tag	result
default		`<img src=" " />` `<video poster=" " />`
image size		`<img src=" ?width=150&height=150" />`
text		`<img src=" ?text=hello, placeholderable" />`
background color		`<img src=" ?bgcolors=#FF5555" />`
multiple background colors(random appear)		`<img src=" ?bgcolors="#FF5555#55FF55" />`
text color		`<img src=" ?colors=#000000" />`
multiple text colors(random appear)		`<img src=" ?colors=#FF5555#55FF55" />`
icon (text and icon cannot be specified at the same time)		`<img src=" ?icon=F8D8" />` The icon parameter is a hexadecimal value (code point) of the icon.