Pure Front-End Custom GIF Meme Generator

async function generateFrontEndMeme(frames, dialogueList, delayMs) {
  // 1. Instantiate pure front-end GIF encoder with dimensions
  var gif = new GIF({ width: 320, height: 200 });

  var canvas = document.createElement('canvas');
  canvas.width = 320;
  canvas.height = 200;
  var ctx = canvas.getContext('2d');

  // 2. Paint each image frame and overlay movie-style dialogue
  for (var i = 0; i < frames.length; i++) {
    ctx.drawImage(frames[i], 0, 0, 320, 200);

    // Styled subtitle with bold white fill and black outline
    ctx.font = 'bold 18px sans-serif';
    ctx.textAlign = 'center';
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 4;
    ctx.strokeText(dialogueList[i], 160, 180);
    ctx.fillStyle = '#ffffff';
    ctx.fillText(dialogueList[i], 160, 180);

    // 3. Add canvas frame into GIF binary stream
    gif.addFrame(ctx, { delay: delayMs, copy: true });
  }

  // 4. Compile in-browser and receive GIF Blob
  gif.on('finished', function(blob) {
    var imgUrl = URL.createObjectURL(blob);
    document.getElementById('meme-output').src = imgUrl;
  });
  gif.render();
}

var gif = new GIF({
  workers: 2,
  quality: 10
});

// Add an image element
gif.addFrame(imageElement);

// Or a canvas element
gif.addFrame(canvasElement, { delay: 200 });

// Or copy pixel data from a canvas context
gif.addFrame(ctx, { copy: true });

gif.on('finished', function(blob) {
  // 'blob' holds the GIF image blob data
  var url = URL.createObjectURL(blob);
  resultImg.src = url;
});

gif.render();

var gif = new GIF({ width: width, height: height });

// 1. Canvas element setup
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');

// 2. Draw base image
context.drawImage(img, 0, 0, width, height);

// 3. Draw text with outline stroke for high contrast
context.font = 'bold ' + fontSize + 'px sans-serif';
context.textAlign = 'center';
context.strokeStyle = '#000000';
context.lineWidth = 4;
context.strokeText(message, width / 2, height - 32);
context.fillStyle = '#ffffff';
context.fillText(message, width / 2, height - 32);

// 4. Insert as a frame into the GIF
gif.addFrame(context, {
    delay: delay,
    copy: true
});

var reader = new FileReader();

reader.onload = function(e) {
    // e.target.result is the Base64 URL of the image
    // Assigning e.target.result to img.src will display the image
    var img = new Image();
    img.onload = function() {
        // Ready to render onto Canvas and add to GIF frame sequence
        addFrameToSequence(img);
    };
    img.src = e.target.result;
};

reader.readAsDataURL(file);

// Frame delay optimization: balancing smoothness and payload size
var fps = 12; // 12 FPS: ideal for web memes
var delayMs = Math.round(1000 / fps); // 83.3ms -> ~84ms

// In GIF89a Graphic Control Extension, delay is stored in hundredths of a second (10ms units)
var gifDelayCentiseconds = Math.round(delayMs / 10); // 8 centiseconds

gif.addFrame(context, {
    delay: delayMs,
    copy: true
});

// Front-end generation outputs in-memory Blob without network round-trips
gif.on('finished', function(blob) {
  // Direct client-side download without server storage
  var link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'custom-meme.gif';
  link.click();
});