{"id":13530217,"url":"https://github.com/sole/Animated_GIF","last_synced_at":"2025-04-01T17:32:12.125Z","repository":{"id":37979707,"uuid":"10182847","full_name":"sole/Animated_GIF","owner":"sole","description":"Javascript library for creating animated GIFs","archived":false,"fork":false,"pushed_at":"2024-02-12T09:47:11.000Z","size":526,"stargazers_count":225,"open_issues_count":18,"forks_count":53,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-10-14T11:18:48.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sole.github.io/Animated_GIF","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sole.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2013-05-20T22:01:46.000Z","updated_at":"2024-06-19T07:12:30.000Z","dependencies_parsed_at":"2024-01-07T12:52:19.456Z","dependency_job_id":"f208c858-5299-4c93-8842-19215c0191ef","html_url":"https://github.com/sole/Animated_GIF","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sole%2FAnimated_GIF","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sole%2FAnimated_GIF/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sole%2FAnimated_GIF/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sole%2FAnimated_GIF/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sole","download_url":"https://codeload.github.com/sole/Animated_GIF/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222650447,"owners_count":17017273,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:00:46.019Z","updated_at":"2024-11-02T16:31:52.058Z","avatar_url":"https://github.com/sole.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript"],"sub_categories":["Javascript","JavaScript"],"readme":"# Animated_GIF [![NPM Version][npm-image]][npm-url]\n\n_A Javascript library for creating animated GIFs_\n\n## How to use it?\n\nInclude `dist/Animated_GIF.js` in your HTML.\n\n```javascript\nvar imgs = document.querySelectorAll('img');\n\nvar ag = new Animated_GIF(); \nag.setSize(320, 240);\n\nfor(var i = 0; i \u003c imgs.length; i++) {\n    ag.addFrame(imgs[i], { delay: 1000 });\n}\n\nvar animatedImage = document.createElement('img');\n\n// This is asynchronous, rendered with WebWorkers\nag.getBase64GIF(function(image) {\n    animatedImage.src = image;\n    document.body.appendChild(animatedImage);\n});\n\n```\n\nIf you instance lots of `Animated_GIF` objects, it's strongly recommended that you call their `destroy` method once you're done rendering the GIFs, as browsers don't seem to be happy otherwise. See the [stress test](tests/stress.html) for an example of this in use!\n\n### Minified versions\n\nThere's a minified version in `dist/`: `dist/Animated_GIF.min.js`.\n\n### Using from npm\n\nYou can also use this via npm.\n\nTo install:\n\n```bash\nnpm install --save animated_gif\n```\n\nTo use:\n\n```javascript\nvar Animated_GIF = require('animated_gif');\n\n// And then the examples are as before\nvar ag = new Animated_GIF(); \nag.setSize(320, 240);\n\n// ... etc\n```\n\n## Available options\n\nPass an object with the desired values when creating an `Animated_GIF` instance:\n\n- `sampleInterval`: how many pixels to skip when creating the palette. Default is 10. Less is better, but slower.\n- `numWorkers`: how many web workers to use. Default is 2.\n- `useQuantizer`: this is `true` by default, and provides the highest quality results, at the cost of slower processing and bigger files. When this is enabled, a neural network quantizer will be used to find the best palette for each frame. No dithering is available in this case, as the colours are chosen with the quantizer too.\n- `dithering`: selects how to best spread the error in colour mapping, to *conceal* the fact that we're using a palette and not true color. Note that using this option automatically disables the aforementioned quantizer. Best results if you pass in a palette, but if not we'll create one using the colours in the first frame. Possible options:\n    - `bayer`: creates a somewhat nice and retro 'x' hatched pattern\n    - `floyd`: creates another somewhat retro look where error is spread, using the Floyd-Steinberg algorithm\n    - `closest`: actually no dithering, just picks the closest colour from the palette per each pixel\n- `palette`: An array of integers containing a palette. E.g. `[ 0xFF0000, 0x00FF00, 0x0000FF, 0x000000 ]` contains red, green, blue and black. The length of a palette must be a power of 2, and contain between 2 and 256 colours.\n\n### addFrame options\n\n- `delay`: set frame delay. Default is `Animated_GIF` instance delay.\n\n## Tests and examples\n\nCheck the files in the `tests` folder:\n\n* [Basic](http://sole.github.io/Animated_GIF/tests/basic.html)\n* [Basic, but using Blobs](http://sole.github.io/Animated_GIF/tests/basic-blob.html)\n* [Custom Palettes](http://sole.github.io/Animated_GIF/tests/custom_palette.html)\n* [Dithering](http://sole.github.io/Animated_GIF/tests/dithering.html)\n* [Stress](http://sole.github.io/Animated_GIF/tests/stress.html)\n* [Sample Interval](http://sole.github.io/Animated_GIF/tests/sample_interval.html)\n* [Frame Delay](http://sole.github.io/Animated_GIF/tests/frame_delay.html)\n\nStart the server from the root folder (e.g. `Animated_GIF`). One way of doing it is using the simple Python web server:\n\n````bash\npython -m SimpleHTTPServer\n````\n\nstarts a server in `http://localhost:8000`. So you can now go to `http://localhost:8000/tests/` and see the available examples.\n\n\u003c!--\n## See it in action\n\nSome sites and apps using it:\n\n* [chat.meatspac.es](http://chat.meatspac.es)\n* [rtcamera](http://rtcamera.apps.5013.es/)\n--\u003e\n\n## Contributing / walkthrough\n\nHere's a quick walkthrough of each of the files in `src/` and what they do:\n\n* `Animated_GIF.js` - definition of the `Animated_GIF` class. Holds the logic for the queueing and rendering of the files, and parsing config options.\n* `Animated_GIF.worker.js` - code for the web worker that color-indexes frames in the background, using `node-dithering` and `NeuQuant.js`. This is bundled in `dist/Animated_GIF.js`, using workerify.\n* `main.js` - stub in order to export the library using Browserify (you won't generally need to touch this one)\n\nExternal / included libraries --see *Credits* for more information on these. You generally don't want to touch these because it will make very difficult to track updates in those libraries:\n\n* `lib/NeuQuant.js` - color quantizer based on a neural network algorithm, this is an external library\n* `omggif.js` - GIF89 encoder/decoder\n* `node-dithering` - class with three different types of dithering algorithms\n\n### Rebuild `dist` files\n\nIf you made changes in the library, you'll need to rebuild the files in `dist/` in order to see the changes working. We have a [node.js](http://nodejs.org/)-based script to regenerate those files.\n\nOnce node.js is installed in your system, do:\n\n```\ncd Animated_GIF     # or however you cloned the library to\nnpm install         # this pulls dependencies for building (uglify, browserify)\nnpm run build       # and this actually builds\n```\n\nOnce you do the initial two steps you just need to execute `npm run build` whenever you change things and want to rebuild the files in `dist/`. Or you can also use `npm run watch` to have it build the library automatically.\n\n\n## Credits\n\nWe're using these fantastic libraries to do GIF stuff:\n\n* Anthony Dekker's [NeuQuant](http://members.ozemail.com.au/~dekker/NEUQUANT.HTML) image quantization algorithm which was ported from C into Java by Kevin Weiner and then to [ActionScript 3](http://www.bytearray.org/?p=93) by Thibault Imbert, and to [JavaScript](http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/) by antimatter15, and fixed, patched and revised by [sole](http://soledadpenades.com).\n* Dean McNamee's [omggif](https://github.com/deanm/omggif) library - for actually encoding into GIF89\n* sole's [node-dithering](https://github.com/sole/node-dithering).\n\nAnd then, to build the `dist` files\n\n* node.js\n* uglify\n* browserify\n\n[npm-image]: https://img.shields.io/npm/v/animated_gif.svg\n[npm-url]: https://npmjs.org/package/animated_gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsole%2FAnimated_GIF","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsole%2FAnimated_GIF","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsole%2FAnimated_GIF/lists"}