newtykip / canvas-gif Goto Github PK

🖼️ Manipulate GIFs easily using node-canvas!

License: Other

JavaScript 21.89% TypeScript 78.11%

npm nodejs canvas web image gif gm encoder decoder graphicsmagick

canvas-gif's Introduction

             *     ,MMM8&&&.            *
                  MMMM88&&&&&    .
                 MMMM88&&&&&&&
     *           MMM88&&&&&&&&
                 MMM88&&&&&&&&
                 'MMM88&&&&&&'
                   'MMM8&&&'      *
          |\___/|
          )     (             .              '                       newty.dev
         =\     /=                                          welcome to my github page (:
           )===(       *
          /     \
          |     |
         /       \
         \       /
  _/\_/\_/\__  _/_/\_/\_/\_/\_/\_/\_/\_/\_/\_
  |  |  |  |( (  |  |  |  |  |  |  |  |  |  |
  |  |  |  | ) ) |  |  |  |  |  |  |  |  |  |
  |  |  |  |(_(  |  |  |  |  |  |  |  |  |  |
  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |
  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |

Rust          2 hrs 14 mins   █████████████████▒░░░░░░░   69.12 %
Markdown      21 mins         ██▓░░░░░░░░░░░░░░░░░░░░░░   11.08 %
TypeScript    19 mins         ██▓░░░░░░░░░░░░░░░░░░░░░░   10.24 %
CSS           8 mins          █░░░░░░░░░░░░░░░░░░░░░░░░   04.45 %
YAML          6 mins          █░░░░░░░░░░░░░░░░░░░░░░░░   03.44 %

A little about me...

17-year-old Computer Science student from the United Kingdom
You can find my current FOSS projects on codeberg
I stream on Twitch sometimes
I love cats :]

canvas-gif's People

Contributors

Stargazers

Watchers

Forkers

hisroyalty bobwombat robbie-wittenhagen dwirizqih switzg kuroosh kayzokun12

canvas-gif's Issues

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.

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

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

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.

Think it would help if export these types!

Can be ts friendly.

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

feature request: rotate

ability to rotate an image, i guess

How To Make Transparent Gif Background

Images when drawn are distorted or has a weird flashing feeling

For the branch v2

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

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?