0.11.0 âĸ Published 1 year ago
letter-image-generator v0.11.0
Letter image generator
Simple letter image generator.
đ Description
It uses a canvas to generate an image binary.
ES Modules and CommonJS support.
For usage in a Node.js environment, will require the npm package 'node-canvas' (will use it instead of the dom).
Allows color and font customization:
Required entries:
- Letters (One or multiple letters, case sensitive)
- Size (px)
Optional settings:
Color
- Letters color (random by default)
- Background color (random by default)
Font
- Font styles:
- normal (default),
- italic
- oblique
- Font variant:
- normal (default)
- small-caps
- Font weight:
- normal (default)
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Font family (not exhaustive list):
- Arial (default)
- Courier New
- Cursive
- Fantasy
- Garamond
- Georgia
- sans-serif
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Font styles:
đĻ Installation
To install the package, just execute the following command:
$ npm install letter-image-generator
đšī¸ Usage
Import
import generateLetterImage from "letter-image-generator";Create image
Default
//Creates an image with the specified letter/s and size in px, default font style, variant, weight and font values
const img = generateLetterImage('L', 100);Custom
- Passing settings as a variable
const allCustomSettings = {
style:'italic',
variant:'small-caps',
weight:'bold',
family:'Georgia',
lettersColor: '#ffffff',
backgroundColor: '#1eb3a4'
};
const custom = generateLetterImage('AC', 100, allCustomSettings);- ... or inline settings
const customColors = generateLetterImage('sc', 100, {
lettersColor: '#c9142c', style: 'italic'
});Usage Example
<html>
<body>
<img id="example" style="border-radius:50%" />
</body>
<script type="module">
//1. Import
import generateLetterImage from "letter-image-generator";
//2. Generate
// default: const img = generateLetterImage('L', 100);
// custom:
const img = generateLetterImage('Lig', 100, {style:'italic', weight:'lighter', family:'sans-serif'});
//3. Use
document.querySelector('#example').src = img;
</script>
</html>
Code output: