images/js/screenshot.js

import canvasSnapshot from './canvasSnapshot.js'; // eslint-disable-line import/extensions
import wait from './wait.js'; // eslint-disable-line import/extensions

const loadAnimation = async (renderSettings) => new Promise((resolve, reject) => {
  const elem = document.getElementById('lottie');
  const animData = {
    container: elem,
    renderer: renderSettings.renderer,
    loop: true,
    autoplay: true,
    rendererSettings: {
      progressiveLoad: false,
      preserveAspectRatio: 'xMidYMid meet',
      imagePreserveAspectRatio: 'xMidYMid meet',
      filterSize: {
        width: '500%',
        height: '500%',
        x: '-200%',
        y: '-200%',
      },
    },
    path: renderSettings.path,
  };
  const anim = lottie.loadAnimation(animData);
  anim.addEventListener('DOMLoaded', () => {
    resolve(anim);
    elem.style.width = `${anim.animationData.w}px`;
    elem.style.height = `${anim.animationData.h}px`;
  });
  anim.onError = (errorType) => {
    reject(errorType);
  };
});

const createSVGSnapshot = (element, container, width, height) => {
  const innerContent = element.innerHTML;
  const iframeElement = document.createElement('iframe');
  container.appendChild(iframeElement);
  iframeElement.style.width = `${width}px`;
  iframeElement.style.height = `${height}px`;
  iframeElement.style.border = 'none';
  iframeElement.contentWindow.document.open();
  iframeElement.contentWindow.document.write(innerContent);
  iframeElement.contentWindow.document.close();
};

const takeSnapshots = async (anim, renderSettings) => {
  let currentFrame = 0;
  const sampleRate = renderSettings.sampleRate > 0 ? renderSettings.sampleRate : 1;
  const elem = document.getElementById('lottie');
  const snapshotsContainer = document.getElementById('snapshotsContainer');
  const width = anim.animationData.w * renderSettings.resolution;
  const height = anim.animationData.h * renderSettings.resolution;

  while (currentFrame < anim.totalFrames) {
    anim.resize();
    anim.goToAndStop(currentFrame);
    if (renderSettings.renderer === 'svg') {
      createSVGSnapshot(elem, snapshotsContainer, width, height);
    } else if (renderSettings.renderer === 'canvas') {
      const canvas = elem.getElementsByTagName('canvas')[0];
      canvasSnapshot(canvas, snapshotsContainer, width, height);
    }
    currentFrame += 1 / sampleRate;
    await wait(1); // eslint-disable-line no-await-in-loop
  }
};

const start = async (renderSettings) => {
  try {
    const anim = await loadAnimation(renderSettings);
    await takeSnapshots(anim, renderSettings);
    window._finished = true; // eslint-disable-line no-underscore-dangle
  } catch (err) {
    console.log('ERROR'); // eslint-disable-line no-console
    console.log(err.message); // eslint-disable-line no-console
  }
};

export default {
  start,
};