gifken
How to use
Create a GIF image in browser
<div id="content"></div>
<script src="gifken-client.js"></script>
<script type="text/javascript">
window.onload = function () {
var newgif = new gifken.Gif();
newgif.width = 100;
newgif.height = 100;
newgif.globalColorTable = gifken.GifColor.createColorTable([
new gifken.GifColor(0, 0, 0),
new gifken.GifColor(255, 0, 0),
new gifken.GifColor(0, 255, 0),
new gifken.GifColor(0, 0, 255),
new gifken.GifColor(100, 100, 255),
new gifken.GifColor(100, 255, 100),
new gifken.GifColor(255, 100, 100),
new gifken.GifColor(0, 255, 255),
new gifken.GifColor(255, 0, 255),
new gifken.GifColor(255, 255, 0),
new gifken.GifColor(255, 255, 255)
]);
newgif.frames = [gifken.GifFrame.init(newgif.width, newgif.height)];
for (var i = 0; i < newgif.frames[0].pixelData.length; ++i) {
newgif.frames[0].pixelData[i] = i % 11;
}
var newimg = new Image();
newimg.src = gifken.GifPresenter.writeToDataUrl(newgif.writeToArrayBuffer());
document.getElementById("content").appendChild(newimg);
};
</script>
Split an animated GIF image in browser
window.onload = function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", GIF_IMAGE_URL, true);
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
var arrayBuffer = e.target["response"];
var gif = gifken.Gif.parse(arrayBuffer);
gif.split(true).forEach(function (i) {
var img = new Image();
var blob = gifken.Gif.writeToBlob(i.writeToArrayBuffer());
img.src = URL.createObjectURL(blob);
document.getElementById("content").appendChild(img);
});
};
xhr.send();
};
Create a GIF image by Node.js
npm install gifken
var fs = require("fs"),
path = require("path"),
gifken = require("gifken");
var newgif = new gifken.Gif();
newgif.width = 100;
newgif.height = 100;
newgif.globalColorTable = gifken.GifColor.createColorTable([
new gifken.GifColor(0, 0, 0),
new gifken.GifColor(255, 0, 0),
new gifken.GifColor(0, 255, 0),
new gifken.GifColor(0, 0, 255),
new gifken.GifColor(100, 100, 255),
new gifken.GifColor(100, 255, 100),
new gifken.GifColor(255, 100, 100),
new gifken.GifColor(0, 255, 255),
new gifken.GifColor(255, 0, 255),
new gifken.GifColor(255, 255, 0),
new gifken.GifColor(255, 255, 255)
]);
newgif.frames = [gifken.GifFrame.init(newgif.width, newgif.height)];
for (var i = 0; i < newgif.frames[0].pixelData.length; ++i) {
newgif.frames[0].pixelData[i] = i % 11;
}
var buffer = newgif.writeToArray();
fs.writeFile(path.resolve(__dirname, "sample.gif"), Buffer.from(buffer), function (err) {
if (err) throw err;
console.log("It's saved!");
});
Directories
gifken
├── build build results
├── node_modules
├── sample sample software using gifken
│ ├── chromeextension
│ └── node
├── src source directory
└── test
Build
To build gifken, following tools are required
git clone *thisrepo*
cd gifken
npm install
npm run-script build
License
MIT