<div id="content"></div>
<script src="https://unpkg.com/[email protected]/lib/gifken.umd.js"></script>
<script type="application/javascript">
window.onload = () => {
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();
// createObjectURL pattern
// var blob = gifken.GifPresenter.writeToBlob(newgif.writeToArrayBuffer());
// newimg.src = URL.createObjectURL(blob);
// data-URL pattern
newimg.src = gifken.GifPresenter.writeToDataUrl(newgif.writeToArrayBuffer());
document.getElementById("content").appendChild(newimg);
};
</script>
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.GifPresenter.writeToBlob(i.writeToArrayBuffer());
img.src = URL.createObjectURL(blob);
document.getElementById("content").appendChild(img);
});
};
xhr.send();
};
npm install gifken
const gifken = require("gifken"),
fs = require("fs"),
path = require("path");
const 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 (let i = 0; i < newgif.frames[0].pixelData.length; ++i) {
newgif.frames[0].pixelData[i] = i % 11;
}
const buffer = newgif.writeToArray();
fs.writeFile(
path.resolve(__dirname, "sample.gif"),
Buffer.from(buffer),
err => {
if (err) throw err;
// eslint-disable-next-line no-console
console.log("It's saved!");
}
);
To build gifken, following tools are required
- Node.js >=8.0.0
- npm
git clone *thisrepo*
cd gifken
npm install
npm run-script build
MIT