newtykins / canvas-gif Goto Github PK

View Code? Open in Web Editor NEW

22.0 3.0 7.0 132.96 MB

🖼️ Manipulate GIFs easily using node-canvas!

License: Other

JavaScript 21.89% TypeScript 78.11%

npm nodejs canvas web image gif gm encoder decoder graphicsmagick graphics

canvas-gif's Introduction

canvas-gif

`npm i canvas-gif`

What is canvas-gif?

canvas-gif is an NPM library that allows you to manipulate the frames of GIFs using node-canvas.

canvas-gif has been deprecated. I seldom use Node.js, let alone do I have a use for a package like this. If you are interested in taking over development, feel free to fork it and publish it yourself. My time with this library, however, has come to a halt.

How does it work?

It works by following these instructions:

Read the input GIF as a Buffer (optional: coalesce the GIF if the option has been enabled and graphicsmagick is available)
Decode the GIF into UInt8Array(s)
For each frame in the GIF, create a canvas instance
Transform the UInt8Array into canvas image data and put it onto the context
Pass the context and other relevant information to the user defined editFrame function that will continue to manipulate the context.
Add the newly edited frame's context to the encoder
Output the encoder's data as a Buffer and return it

How can I make use of it?

You can download it using npm by running

npm i canvas-gif

And you can then proceed to use it in your code. For an example of how to do so, please check out the example folder.

Options

All of these options are optional! wow

coalesce - Whether the GIF should be coalesced by GraphicsMagick before being processed by the engine. Requires GraphicsMagick to be installed - if it is not and the option is true and error will be thrown and the code will continue with the original file buffer. Defaults to false
delay - The amount of delay between each frame in ms. Defaults to 0
repeat - How many times the GIF should repeat. If the value is 0, it will repeat forever. Defaults to 0
algorithm - The algorithm the encoder should use. Can be one of neuquant and octree. Defaults to neuquant
optimiser - Whether the encoder should use its in-built optimiser. Defaults to false
fps - The amount of frames to render per second. Defaults to 60
quality - The quality of the GIF. A value between 1-100. The higher the number, the better quality the GIF will be. Defaults to 100

Common Errors

There was an error during coalescing: Stream yields empty buffer. Reverting buffer to file buffer!

This error happens if the coalescing option is enabled but you are missing GraphicsMagick. Please install it from here and if the error persists feel free to report it as a problem and I'll try my best to help!

_{this project uses the opinionated queer license v1.1 - tl;dr see here :]}

To-do

Return emitter for easy event handling

canvas-gif's People

Contributors

Stargazers

Watchers

Forkers

hisroyalty bobwombat robbie-wittenhagen dwirizqih switzg kuroosh kayzokun12

canvas-gif's Issues

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Check this box to trigger a request for Renovate to run again on this repository

How To Make Transparent Gif Background

API docs?

seems like an interesting project but can you let me know what features you support?

I'd like to overlay some images and text onto an animated GIF (eg memegenerator) is that possible?

Think it would help if export these types!

Can be ts friendly.

https://github.com/newtykins/canvas-gif/blob/18ad0781530eb9a62c3e08efb7bc05cda5cc80bb/src/index.ts#L40

Images when drawn are distorted or has a weird flashing feeling

For the branch v2

^ to reproduce, use the drawImage() method on a gif.

Anyway we could load a gif from a url?

ive been thinking of using a URL for my loads, though of asking if theres a way to load via URL instead of file directory

feature request: rotate

ability to rotate an image, i guess

Example folder is gone :(

I'm too much of a noob to understand how to use this package and I would appreciate a small example to guide me.

Gif is distorted + much faster

Code

import canvasGif from "canvas-gif"
import fs from "fs"

const gifUrl = "https://compote.slate.com/images/697b023b-64a5-49a0-8059-27b963453fb1.gif"

const makeGif = async () => {
	const response = await fetch(gifUrl)
	const arrayBuffer = await response.arrayBuffer()
	canvasGif(Buffer.from(arrayBuffer), (ctx, width, height, totalFrames, currentFrame) => {
		ctx.fillStyle = "#fff"
		ctx.font = "30px 'Fira Code Retina'"
		ctx.fillText("this is epic!?!", 50, 100)
		ctx.fillText(`Frame ${currentFrame}/${totalFrames}`, 50, 300)
	}, {}).then((buffer) => {
		fs.writeFileSync("./output.gif", buffer)
		console.log("Done!")
	})
}

makeGif()

Original gif

Modified

How can I fix the distortion? Also, is there a way to set the fps the same as the original gif? The problem isn't Buffer.from(arrayBuffer) because when I write that to ./output.gif directly, there is no distortion.