vincent7128 / text-image

Convert text to image https://vincent7128.github.io/text-image/

Text Image

About

📺 Live Demo
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

text-image's Issues

(process:5284): Pango-WARNING **

When I console out the code in code editor, it comes out these two lines warning.

How to save the output as a PNG image in Node.js?

How to save the output as a PNG image in Node.js?

Add Bold, Italic to image

Is it possible to bold or italic the text?

Please add that too.

Package.json main points to non-existent file

The main property of the package.json file is pointing to dist/text-image.min.js, but the actual file is dist/text-image.js.

This is causing the module not to be loaded properly when using require() statements.

own text style (help)

Hi thank you for a great project, could you advise me how I can add my own fonts when I have downloaded .TTF files? Thank you

I try to use a font that the machine will not be able to read (eg facebook, google)

Image is clipping pixels on some fonts

When I implemented the text-image and applied the Dancing Script Google Font, the text was getting clipped.

Perhaps adding a "whitespace buffer" setting (for each side) would allow people to fix this manually?