Text Image
About
Convert text to image. Work with unicode and web font like FontAwesome, you can use emoji too.
Usage
NPM:
npm install text-image
CDN:
<script src="https://cdn.jsdelivr.net/npm/text-image/dist/text-image.js"></script>
Code example:
// create new TextImage object
var textImage1 = TextImage();
// create new TextImage object with customize style
var style = {
font: 'serif',
align: 'center',
color: 'red',
size: 18,
background: 'white',
stroke: 1,
strokeColor: 'rgba(0, 0, 0, 0)',
lineHeight: '1.6em',
bold: true,
italic: true
};
var textImage2 = TextImage(style);
// convert text message to image element
var img = textImage.toImage('MESSAGE');
// convert text message to base64 dataURL
var data = textImage.toDataURL(message);
// change style
textImage.setStyle(style);
Style object
The default style object
{
font: 'Sans-serif',
align: 'left',
color: '#000000',
size: 16,
background: 'rgba(0, 0, 0, 1)',
stroke: 0,
strokeColor: '#FFFFFF',
lineHeight: '1.2em'
}
font
The font property like css font-family and you can use web fonts like FontAwesome.
align
The align property specifies the horizontal alignment of text, use 'left', 'center' or 'right'.
color & background & strokeColor
The color, background and strokeColor property like css color.
/* <named-color> values */
color: 'red'
color: 'orange'
color: 'tan'
color: 'rebeccapurple'
/* <hex-color> values */
color: '#090'
color: '#009900'
color: '#090a'
color: '#009900aa'
/* <rgb()> values */
color: 'rgb(34, 12, 64, 0.6)'
color: 'rgba(34, 12, 64, 0.6)'
color: 'rgb(34 12 64 / 0.6)'
color: 'rgba(34 12 64 / 0.3)'
/* <hsl()> values */
color: 'hsl(30, 100%, 50%, 0.6)'
color: 'hsla(30, 100%, 50%, 0.6)'
color: 'hsl(30 100% 50% / 0.6)'
color: 'hsla(30 100% 50% / 0.6)'
size & stroke
The size and stroke property is the text size and outline width, only use numbers.
lineHeight
The lineHeight property like css line-height.
License
This project is licensed under the MIT License - see the LICENSE file for details