Text Image
(text-image.js)

Convert text to image.

Work with unicode and web font like FontAwesome, you can use emoji too. 🚀

Download .zip
download image 

        

        
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, 1)'
};
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, 0)',
stroke: 0,
strokeColor: '#FFFFFF',
bold: false,
italic: false
}

        
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.