Skip to content

This JS library lets you create placeholder images via JavaScript.

License

Notifications You must be signed in to change notification settings

thormeier/generate-placeholder-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

generate-placeholder-image

This JS library lets you create placeholder images via JavaScript. Here's a short post on dev.to describing how this thing was built.

Usage

Within your application

  • 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.

Config reference with default values

{
    width: 640,
    height: 480,
    r: 255,
    g: 255,
    b: 255,
    text: 'Lorem ipsum',
    font: 'san-serif',
    output: './image.png'
}

As a standalone script

  • 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'

CLI config reference with default values

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     

Currently supported file types

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

Examples

Executing this (all-default parameters, except --output/-o or equivalent parameters for the generator function):

generate-placeholder-image -o ./examples/image.png

produces:

image.png


Executing this (changed font):

generate-placeholder-image -f Times -o ./examples/times.png

produces this:

times.png


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:

hello-world.png

About

This JS library lets you create placeholder images via JavaScript.

Resources

License

Stars

Watchers

Forks

Packages

No packages published