This JS library lets you create placeholder images via JavaScript.
MIT License
This JS library lets you create placeholder images via JavaScript. Here's a short post on dev.to describing how this thing was built.
Install this library in your project:
npm i generate-placeholder-image
Import the generator function
const generatePlaceholderImage = require('generate-placeholder-image')
Start using it:
generatePlaceholderImage({
width: 300,
height: 300,
r: 255,
g: 255,
b: 0,
text: 'Hello, World!',
output: '/some/directory/images/placeholder.png'
})
If canvas is not working correctly/at all, you might need to compile a few things. Please see the canvas project wiki for detailed explanation.
{
width: 640,
height: 480,
r: 255,
g: 255,
b: 255,
text: 'Lorem ipsum',
font: 'san-serif',
output: './image.png'
}
Installing it globally:
npm i -g generate-placeholder-image
Start using it:
generate-placeholder-image -w 300 -h 300 -r 255 -g 255 -b 0 -t 'Hello, World!' -o '/some/directory/images/placeholder.png'
Or use it via npx
:
npx generate-placeholder-image -w 300 -h 300 -r 255 -g 255 -b 0 -t 'Hello, World!' -o '/some/directory/images/placeholder.png'
Placeholder image generator
Create placeholder images with a single line of bash!
Arguments
-w, --width number Width of the image. Default: 640
-h, --height number Height of the image. Default: 480
-r, --red number Red part, 0-255. Default: 255
-g, --green number Green part, 0-255. Default: 255
-b, --blue number Blue part, 0-255. Default: 255
-t, --text string Text to put on image. Default: "Lorem ipsum"
-f, --font string Font the text will be rendered in. Default: "sans-serif"
-o, --output string Path of the image. Default: "./image.png"
--help Prints this help
-v, --version Prints the version
--open Opens the image in your default image viewer afterwards (Linux, OSX and Windows)
Example
./generate.js -w 100 -h 100 -r 0 -g 0 -b 255 -t "Hello, World!" -f Helvetica
-o ./placeholder.png
image/png
(By specifying a JPG as the output file, for example generate-placeholder-image -o ./examples/image.jpg
)image/jpeg
(By specifying a PNG as the output file, for example generate-placeholder-image -o ./examples/image.jpg
)application/pdf
(By specifying a PDF as the output file, for example generate-placeholder-image -o ./examples/image.pdf
)image/svg+xml
(By specifying an SVG as the output file, for example generate-placeholder-image -o ./examples/image.svg
)Executing this (all-default parameters, except --output
/-o
or equivalent parameters for the generator function):
generate-placeholder-image -o ./examples/image.png
produces:
Executing this (changed font):
generate-placeholder-image -f Times -o ./examples/times.png
produces this:
Executing this (or equivalent parameters for the generator function):
generate-placeholder-image -w 300 -h 150 -r 255 -g 255 -b 0 -t 'Hello, World!' -o ./examples/hello-world.png
produces this: