# text-on-gif > a simple package for writing text on animated as well as non-animated gifs Latest version **2.0.13** (published 2023-04-20) · ISC license · 0 weekly downloads ## Install ```sh npm install text-on-gif pnpm add text-on-gif yarn add text-on-gif bun add text-on-gif ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.13 | | Published | 2023-04-20 | | First published | 2021-01-25 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 23.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | sanidhya077 | | Maintainers | sanidhya077 | | Keywords | text-on-gif, write-on-gif, message-on-gif, animate-text-gif, text on gif, text to gif, message on gif, add text to gif, print text on gif | ## Links - npm: https://www.npmjs.com/package/text-on-gif - Homepage: https://github.com/sanidhya711/text-on-gif - npm.io page: https://npm.io/package/text-on-gif ## Dependencies (3) - [canvas](https://npm.io/package/canvas.md) ^2.11.2 - [gif-frames](https://npm.io/package/gif-frames.md) ^1.0.1 - [gif-encoder-2](https://npm.io/package/gif-encoder-2.md) ^1.0.5 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 2.0.13 (latest) — 2023-04-20 - 2.0.12 — 2023-04-05 - 2.0.11 — 2023-03-25 - 2.0.10 — 2022-11-15 - 2.0.9 — 2022-06-29 - 2.0.8 — 2022-06-29 - 2.0.7 — 2022-03-24 - 2.0.6 — 2022-03-20 - 2.0.5 — 2022-03-20 - 2.0.4 — 2022-03-20 - 2.0.3 — 2022-03-19 - 2.0.2 — 2022-03-17 - 2.0.1 — 2022-02-24 - 2.0.0 — 2021-12-22 - 1.0.29 — 2021-06-02 - … 29 more at https://npm.io/package/text-on-gif/versions ## README *text-on-gif is a simple package for writing text on animated as well as non-animated gifs* > **NOTES** >* SUPPORTS TRANSPARENT GIFS TOO NOW >* ADDED OPTION TO REGESTER FONTS ## **Basic Usage** ```js const TextOnGif = require('text-on-gif'); (async function(){ //create a TextOnGif object var gif = new TextOnGif({ file_path: "https://media0.giphy.com/media/Ju7l5y9osyymQ/giphy.gif" //path to local file, url or Buffer }); //get as buffer var buffer = await gif.textOnGif({ text: "text on gif sucks", get_as_buffer: true }); console.log(buffer); //write as file await gif.textOnGif({ text: "text on gif sucks", get_as_buffer: false, //set to false to save time write_path: "gif-with-text.gif" }); })(); ``` # Example ![GitHub Logo](https://i.imgur.com/NuO5Tyu.gif) # # To Write Text On Gif : ### ***make a new TextOnGif object then call its member function textOnGif*** ## Example: ```js var gif = new TextOnGif({ file_path: "path/to/gif.gif" }); var buffer = await gif.textOnGif({ text: "Yo this readme sick :D", }); ``` ## TextOnGif Constructor Parameters Parameter Name | Type | Default Value ----------------------------- | ------------------ | ------- [file_path](#file_path) | String \|\| Buffer | null [font_size](#font_size) | String | "32px" [font_style](#font_style) | String | "calibri" [font_color](#font_color) | String | "white" [stroke_color](#stroke_color) | String | "transparent" [stroke_width](#stroke_width) | Int | 1 [alignment_x](#alignment) | String | "middle" [alignment_y](#alignment) | String | "bottom" [position_x](#position_x) | Int | null [position_y](#position_y) | Int | null [offset_x](#offset_x) | Int | 10 [offset_y](#offset_y) | Int | 10 [row_gap](#row_gap) | Int | 5 [repeat](#repeat) | Int | 0 [transparent](#transparent) | Boolean | false   > NOTE: Even after creating an object you can always change these properties (exception: file_path and transparent). **Example:** ```js var gif = new TextOnGif({ file_path: "path/to/gif.gif", font_color: "orange" }); //gif 1 has orange colored text await gif.textOnGif({ text: "orange colored text", write_path: "gif1.gif" }); //CHANGING FONT COLOR AND SIZE gif.font_color = "blue"; gif.font_size = "100px"; //gif 2 has blue colored text await gif.textOnGif({ text: "blue colored text", write_path: "gif2.gif" }); ```   ### [PARAMETER DETAILS LISTED BELOW ⬇️](#file_path)   ## textOnGif Function Parameters: Parameter Name | Type | Default Value ------------------------------- | ------- | ------- [text](#text) | String | "" [get_as_buffer](#get_as_buffer) | Boolean | true [write_path](#write_path) | String | null [retain](#retain) | Boolean | false   ### [PARAMETER DETAILS LISTED BELOW ⬇️](#text)   To use a font file that is not installed as a system font, use registerFont(). This must be done before calling textOnGif()   # EVENTS: * ***"extraction complete"*** #### Fired once when frame extraction is complete   * ***"on frame"*** #### Fired everytime before writing text on a frame (passes the frame index: 1 indexed)   * ***"progress"*** #### Fired with percentage of gif successfully encoded   * ***"finished"*** #### Fired when gif has successfully been encoded   ### Example: ```js var gif = new TextOnGif({ file_path: "path/to/gif.gif" }); // you dont have to manually handle this but you can if you want to record the time or something gif.on("extraction complete",async()=>{ console.log("frames extracted!"); gif.textOnGif({ text: "imma carti fan :D", write_path: "path/to/gif.gif" }); }); //produces alternating white and black colored text on each frame gif.on("on frame",(frameIndex)=>{ //be careful you dont change any breaking properties such as font size as the text might overflow if this is done while the text is being written on a gif if(frameIndex % 2 == 0){ gif.font_color = "white"; }else{ gif.font_color = "black"; } }); //encoding the frames back into a gif gif.on("progress",(percentage)=>{ console.log(percentage+"% encoding done :)"); }); gif.on("finished",()=>{ console.log("gif encoding finished!"); }); ```   > # **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.**   # get_as_buffer Whether to return the gif as a buffer or not after printing the message on it. _**Set to false if buffer is not needed** to speed up printing of text on gif_   # write_path Path of the file where the gif is to be written. *Example:* ```js await gif.textOnGif({ text: "huihuihui", get_as_buffer: false,// set to false to speed up the process as gif is piped instead write_path: "gif-with-text.gif" }); ``` **Gif will only be written to file if value of write_path is passed**   # retain 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*   # file_path Gif on which the text is to be printed, ___path to a local gif file / URL___ or ___in-memory buffer___ *gif.file_path is read only and cant be altered after the TextOnGif object is created*   # font_size Size of font, any [CSS font-size value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) *Invalid values might break [font_style](#font_style) and [font_color](#font_color) too and result inna very ugly output*   # font_style Any installed font. Example: (font_style: "Comic Sans MS") *Invalid values might break [font_size](#font_size) and [font_color](#font_color) too and result inna very ugly output*   # font_color Color of the font. Accepts any [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). *Invalid values might break [font_size](#font_size) and [font_style](#font_style) too and result inna very ugly output*   # stroke_color Color of the stroke, leave as "transparent" for no stroke. Accepts any [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).   # stroke_width Number specifying the line width(Outline) of drawn text, in *'coordinate space units'*   # alignment ### valid values for Hozizontal Alignment (*alignment_x*) * "left" * "center" * "right" ### valid values for Vertical Alignment (*alignment_y*) * "top" * "middle" * "bottom"   # position_x Starting position of text on the x axis(in pixels) *must be a Number*   # position_y Starting position of text on the y axis(in pixels) *must be a Number*   # offset_x Offset of starting position of text from left or right(in pixels) depending on alignment_x, *must be a Number* *not taken into account if position_x is specified*   # offset_y Offset of starting position of text from Top or Bottom(in pixels) depending on alignment_y, *must be a Number* *not taken into account if position_y is specified*   # row_gap 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   # Number of frames in Gif, Gif Height And Gif Width *these properties are unalterable* You can access the gif's width and height using "await gif.width" and "await gif.height" respectively where gif is a *TextOnGif object*. number of frames in the gif can be accessed by using "await gif.noOfFrames" .   # > # Reason for Using Class Structure: v1 of this library was structed as a single function but in v2 many major breaking changes were made and I shifted it to class structure mainly because if you want to write different text on the same gif multiple times(that was my use case) then you wouldnt have to extract the gif frames everytime and that saves a lot of time and resources(reduces it to half or even more the second time you write on the gif) * ***So like if you want to reuse a gif and write on it multiple times then its very fast after the first time(2x or more maybe)*** * ***Another use case would be that you could preload a gif that you know you'll use and write the text on it at a later time therefore save some time***   # Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

ienadlard
💻
Cryptizism
📖
Ian Wijma
🐛
Asrın Tekelioğlu
🐛
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! --- _Source: https://npm.io/package/text-on-gif · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._