![]() Canvas-gif took about three seconds to modify a GIF, but it took 21 seconds to manipulate the same GIF with gifwrap and jimp. ![]() This is the result you’ll get when you run the code:Īlthough this process works, it has performance problems and is too slow. From there, we made a new frame based on the text and the image in that specific frame.įinally, we pushed all new frames into the frames array to create a new edited GIF. In let readGif = await GifUtil.read("mr-rogers-nightmare.gif"), we read the GIF into memory with gifwrap and then looped through the frames to use jimp to create jimpCopied.print(font, 10, 0, "LogRocket"). JimpCopied.print(font, 10, 0, "LogRocket") Let readGif = await GifUtil.read("mr-rogers-nightmare.gif") Let font = await Jimp.loadFont(Jimp.FONT_SANS_32_WHITE) We’ll leverage this API to modify our GIF.Įnter the function definition below: const callBack = (context, width, height, totalFrames, currentFrame) => = require("gifwrap") ![]() ![]() Here, you can render 2D drawings, draw shapes, create images, text, and more. Using the callBack function with canvas-gifĬallBack allows you to modify the frame’s context as a part of the Canvas API. Don’t worry we’ll look at handling that soon. Here, canvasGif exposes the callBack function to accept the GIF file path and requires a third optional configuration argument. Next, create an app.js file and add the following content to it: const canvasGif = require("canvas-gif") ĬanvasGif(path.join(_dirname, "mr-rogers-nightmare.gif"), callBack, options)įs.writeFileSync(path.resolve(_dirname, "output1.gif"), buffer) Here’s an example of what will happen when you run the code:Īfter the setup and installation are complete, download a GIF and place it in the root directory. You’ll need to have Node.js and npm installed to work with canvas-gif.Ĭreate a directory for the project, initialize a Node.js project, and install the canvas-gif npm library with the command below: mkdir edit-gif & cd edit-gif & npm init -y & npm install canvas-gif Now that we’ve covered the background, let’s dive in and set up a project to explore an example in action. Finally, canvas-gif will return the encoder’s data as a buffer, which we will write into a GIF file. The library will then manipulate the context and add the newly edited frame’s context to the encoder. From there, the library passes the context and other relevant information to the functions to edit the frame. Then, it transforms the UInt8Array into canvas ImageData and puts it into the CanvasRenderingContext. However, if you intend to coalesce the GIF, you’ll need to install ImageMagick.įirst, canvas-gif decodes the GIF into an UInt8Array(s) and creates a canvas instance for each frame that the GIF returns. The canvas-gif library allows you to read input GIFs as a buffer with the option to coalesce the GIF. Editing GIFs and adding text to our Node.js GIF.Using the callBack function with canvas-gif.Before diving into editing GIFs, make sure you familiarize yourself with creating and saving images with node-canvas. In this article, we will write a sample code to read and edit a GIF using canvas-gif for your next Node.js project. Canvas-gif harnesses all the superpowers of Canvas, allowing you to manipulate every part of the image beyond just adding text to each GIF frame. Contact Eze at Editing GIFs in your Node.js project with canvas-gifĬanvas-gif is an excellent tool for accessing and editing GIF frames in Node.js projects, including adding text, furthering animations, and editing frames. Eze Sunday Follow Eze Sunday is a full-stack software developer and technical writer passionate about solving problems, one line of code at a time.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |