Skip to content

Latest commit

 

History

History
279 lines (180 loc) · 7.94 KB

README.md

File metadata and controls

279 lines (180 loc) · 7.94 KB
Raw

text-on-gif is a simple package for writing text on gifs

NOTES This is a fork of https://github.com/sanidhya711/text-on-gif

Contributors to this fork

PeterStark000

Basic Usage

const { TextOnGif } = require('gift-on-text')

const gifURL = 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif';

// -- In async function or top-level await supported namespace --
const gif = new TextOnGif(gifURL);

await gif.setText('Hello', {
    alignmentY: "top",
    alignmentX: "left"
});

// Update on the fly
gif.on("frameIndexUpdate", async (frameIndex) => {
    if (frameIndex == 15) {
        gif.canvasOptions.y = 150;
        gif.canvasOptions.x = 110;

        await gif.setText("World");
    }
});

await gif.toFile('result.gif'); // Save new gif

const gifBuffer = await gif.toBuffer(); // get buffer

Result

Gif with text example

Writing Text on a GIF:

Create a new TextOnGif instance, then call and await .setText()

Example:

const gif = await new TextOnGif(gifURL)
    .setText(text, options)

TextOnGif.setText() Parameters

text

Type Default Value
string ' '

options (Object)

Parameter Name Type Default Value
fontSize String "32px"
fontStyle String "calibri"
fontColor String "white"
strokeColor String "transparent"
strokeWidth Number 1
alignmentX String "middle"
alignmentY String "bottom"
positionX Number null
positionY Number null
offsetX Number 10
offsetY Number 10
rowGap Number 5
repeat Number 0
retain Boolean false
transparent Boolean false

To use a font file that is not installed as a system font, use registerFont(). This must be done before calling textOnGif()

Saving gif as a File

call gif.toFile(path) to save as a file.

await gif.toFile('output/myGif.gif')

Getting the gif Buffer

const buffer = await gif.toBuffer();

EVENTS:

  • "extractionComplete"

    type: () => void

Fired once when frame extraction is complete

 

  • "frameIndexUpdate"

    type: (index:number) => void

Fired everytime before writing text on a frame (passes the frame index: 1 indexed)

 

  • "progress"

    type: (percent:number) => void

Fired with percentage of gif successfully encoded

 

  • "finished"

    type: () => void

Fired when gif has successfully been encoded

 

PARAMETER DETAILS ⬇️

All the parameter details are listed below

  • Pull requests to improve this ugly readme are more than welcome :D

  • Or if you have any suggestions or request for new features feel free to open an issue.

 

text

Text to be printed on the gif

Can be a String, Number or Boolean.

 

retain

This option is currently non-functional.

if set to true, when you call the textOnGif function to write on the gif, the text will be retained on the source and all consecutive textOnGif function calls will return the gif with the cumulative text.

useful when you have to write text on multiple places on the same gif

 

filePath

Gif on which the text is to be printed,
path to a local gif file / URL or in-memory buffer

gif.filePath is read only and cant be altered after the TextOnGif object is created

 

fontSize

Size of font, any CSS font-size value

Invalid values might break fontStyle and fontColor too and result inna very ugly output

 

fontStyle

Any installed font. Example: (fontStyle: "Comic Sans MS")

Invalid values might break fontSize and fontColor too and result inna very ugly output

 

fontColor

Color of the font. Accepts any CSS Color.

Invalid values might break fontSize and fontStyle too and result inna very ugly output

 

strokeColor

Color of the stroke, leave as "transparent" for no stroke.
Accepts any CSS Color.

 

strokeWidth

Number specifying the line width(Outline) of drawn text,
in 'coordinate space units'

 

alignment

valid values for Hozizontal Alignment (alignmentX)

  • "left"
  • "center"
  • "right"

valid values for Vertical Alignment (alignmentY)

  • "top"
  • "middle"
  • "bottom"

 

positionX

Starting position of text on the x axis(in pixels)
must be a Number

 

positionY

Starting position of text on the y axis(in pixels)
must be a Number

 

offsetX

Offset of starting position of text from left or right(in pixels) depending on alignmentX, must be a Number

not taken into account if positionX is specified

 

offsetY

Offset of starting position of text from Top or Bottom(in pixels) depending on alignmentY, must be a Number

not taken into account if positionY is specified

 

rowGap

Vertical gap between rows of text(in pixels)

taken into account when text to be printed is too long for one row and is wrapped to the next row

 

repeat

Number of times to repeat the GIF, n Number

  • If n is -1, play once.
  • If n is 0, loop indefinitely.
  • If n is a positive number, loop n times.

 

transparent

whether the gif should have a transparent background or not

  • If set to true then all black pixels are rendered as transparent
  • If set to false then transparent pixels are automatically rendered as black

Contributors ✨

Thanks goes to these wonderful people (emoji key):


ienadlard
💻
Cryptizism
📖
Ian Wijma
🐛
Asrın Tekelioğlu
🐛

This project follows the all-contributors specification. Contributions of any kind welcome!