captureSequences

captureSequences.ts

import JSZip from "jszip"; //https://github.com/Stuk/jszip

export function captureSequences(canvas: HTMLCanvasElement, filename: string, onCapture: (frame: number) => string) {
  let frame = 0;
  var zip = new JSZip();
  const capture = () => {
    const uri = canvas.toDataURL('png', 1);
    var idx = uri.indexOf('base64,') + 'base64,'.length;
    var content = uri.substring(idx);
    const frameName = onCapture(frame++);
    zip.file(frameName, content, { base64: true });
  };
  capture();
  let timer = setInterval(capture, 40);
  return (done?: (totalFrame: number) => void) => {
    clearInterval(timer);
    zip.generateAsync({ type: "blob" }).then(contentBlob => {
      done && done(frame);
      downloadBlob(contentBlob, filename)
    });
  };
}

export function downloadBlob(blob: Blob, filename: string) {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
}