Welcome to Gifwrap: Your Ultimate Guide to GIF Manipulation

Gifwrap is a powerful JavaScript library designed for seamless handling, creation, and manipulation of GIF images. Whether you’re a developer looking to add some dynamic visuals to your web application or someone who just wants to play around with GIFs, Gifwrap offers dozens of useful APIs to achieve your goals.

Overview of Gifwrap

Gifwrap simplifies the process of working with GIF files by providing an easy-to-use API for reading, creating, and modifying animated GIFs. Below are some introductory examples and common use cases of Gifwrap’s APIs.

API Examples

Loading and Saving GIFs

  const gifwrap = require('gifwrap');
  const fs = require('fs');

  // Load a GIF from file system
  gifwrap.GifCodec.decodeGif(fs.readFileSync('input.gif'))
    .then(gif => {
      console.log('GIF loaded:', gif);

      // Save the GIF
      gifwrap.GifCodec.encodeGif(gif)
        .then(outputBuffer => fs.writeFileSync('output.gif', outputBuffer));
    });

Creating a New GIF

  const { Gif, BitmapImage, BitmapEnveloper } = require('gifwrap');

  // Create a new GIF
  const bitmap = new BitmapImage(300, 300, // width, height
    [0xFF, 0x00, 0x00, 0xFF,   // Red pixel
     0x00, 0xFF, 0x00, 0xFF,   // Green pixel and so on...
     0x00, 0x00, 0xFF, 0xFF, 
     0x00, 0x00, 0x00, 0xFF]);

  const gif = new Gif([bitmap]);
  gif.frames.push(bitmap);

  gif.encode()
    .then(outputBuffer => {
      fs.writeFileSync('new.gif', outputBuffer);
      console.log('New GIF created!');
    });

Adding Frames to Existing GIFs

  const { GifCodec, BitmapImage } = require('gifwrap');
  const fs = require('fs');

  // Load the GIF
  GifCodec.decodeGif(fs.readFileSync('base.gif'))
    .then(gif => {
      // Create a new frame
      const newFrame = new BitmapImage(100, 100, [0x00, 0xFF, 0x00, 0xFF]);

      // Add frame to the GIF
      gif.frames.push(newFrame);
      return gif.encode();
    })
    .then(outputBuffer => fs.writeFileSync('updated.gif', outputBuffer))
    .catch(error => console.error(error));

Editing Individual Frames

  const { GifCodec, BitmapImage } = require('gifwrap');
  const fs = require('fs');

  // Load the GIF
  GifCodec.decodeGif(fs.readFileSync('original.gif'))
    .then(gif => {
      // Modify the first frame
      const frame = gif.frames[0];
      frame.setPixel(0, 0, 0x00FF00FF); // Set the first pixel to green

      return gif.encode();
    })
    .then(outputBuffer => fs.writeFileSync('edited.gif', outputBuffer))
    .catch(error => console.error(error));

Application Example Using Gifwrap

Imagine you’re building a web application where users can create GIFs from uploaded images. Here’s a simple example that utilizes gifwrap to achieve this functionality:

  const express = require('express');
  const fileUpload = require('express-fileupload');
  const { Gif, BitmapImage } = require('gifwrap');
  const fs = require('fs');

  const app = express();

  app.use(fileUpload());

  app.post('/create-gif', (req, res) => {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send('No files were uploaded.');
    }

    const uploadedImages = req.files.images; // Assuming multiple images
    let frames = [];

    uploadedImages.forEach((image, index) => {
      const bitmap = BitmapImage.fromFile(image.data);
      frames.push(bitmap);
    });

    const gif = new Gif(frames);
    gif.encode()
      .then(outputBuffer => {
        const outputPath = 'user-created.gif';
        fs.writeFileSync(outputPath, outputBuffer);
        res.download(outputPath);
        console.log('GIF created from uploaded images!');
      });
  });

  app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
  });

This example sets up an Express server that allows users to upload images, which are then converted into a GIF using Gifwrap. The resulting GIF is saved to the file system and served back to the user for download.

With Gifwrap, the possibilities for creativity are endless. Whether you’re developing a feature for a web app or just exploring GIF manipulation, Gifwrap has got you covered.

---

Hash: e3e0e90b795fc7ab5c5a4ec950254a3a7a4a7859fe140e22a207b9e75299be6d