< 1Kb library to generate image placeholders on client side
MIT License
Javascriptplaceholder image
EN-Readme
851 b
1kscript
placeholder.js :
<script src="dist/placeholder.min.js"></script>
CDN:
// install before
// npm install placeholder.js
import placeholder from 'placeholder.js';
// or
var placeholder = require("placeholder.js");
UMDplaceholder
1.
placeholder.js:
<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">
2.
URLImgoptions
<img class="placeholder" />
options:
<img options="size=256x128&text=Hello!" class="placeholder" />
img``class``placeholder
.encodeURIComponent
% %25
, & %26
, = %3D
, %20
e.g.<img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder">
Hello%25&=
.
Placeholder API, e.g. placeholder.getData({text: 'Image 404'})
. URLimg e.g. options="size=256x128&text=Hello!"
size
: placeholder. : 256x128
, : 128x128
.bgcolor
: . : #969696
. : random
.color
: . : #ccc
. : random
.text
: . : Hello World,
. : equal to size
.fstyle
: . normal / italic / oblique
. : oblique
.fweight
: weight. normal / bold / bolder / lighter / Number
. : bold
.fsize
: . : `` .ffamily
: . : consolas
.:
var opts = {
size: '512x256',
bgcolor: '#ccc',
color: '#969696',
text: 'Hello World, ',
fstyle:'oblique',
fweight: 'bold',
fsize:'40',
ffamily: 'consolas'
}
console.log(placeholder.getData(opts)) //get the base64 of the placeholder image.
imgoptions
size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas
placeholder.getData(opts)
: placeholderbase64imgsrccssplaceholder.getCanvas(opts)
: canvas, DOMplaceholder.render()
: **class='placeholder'**imgoptionsMIT