Декодировать анимированный WebP с помощью Javascript (React/NextJS)

Question

Я пытаюсь декодировать анимированные изображения WebP . Я хотел бы извлечь кадры , составляющие анимацию, а также задержку для каждого кадра.

Любая идея о том, как справиться с декодированием анимированных изображений WebP с использованием JavaScript в среде React/NextJS ?

Я нашел node-webpmux (https://github.com/ApeironTsuka/node-webpmux), который является webpmux (https://developers.google.com/speed/webp/docs/webpmux?hl=es-419) для JavaScript. Однако он несовместим, так как сначала пытается использовать FS и вылетает в браузерах, будучи несовместимым с React/NextJS.

Answer 1

В настоящее время я работаю с фреймворком, я вижу некоторые проблемы с моими фреймами для анимации webP, но работает нормально!

Я могу поделиться своим кодом в NodeJS:

      const WebpImage = require('node-webpmux').Image;
...
    const webPImage = await new WebpImage();
await webPImage.load(file);

if (webPImage.hasAnim) {
  const maxFrames = this.isReduceQuality() ? 1 : 3;

  if (webPImage.frames !== undefined && webPImage.frames.length > 1) {
    /**
     * Available frames for webp image.
     */
    const frames = [...webPImage.frames];

    /**
     * Evaluate to reduce the number of frames for the image.
     */
    const reduce = Math.round(webPImage.frames.length / maxFrames);

    /**
     * Cleaning frames for webp image.
     */
    webPImage.frames.splice(0, webPImage.frames.length);

    /**
     * Pushing webp image frames.
     */
    frames.forEach((frame, index) => {
      if (index % reduce === 0) {
        frame.delay = 300;
        webPImage.frames.push(frame);
      }
    });
  }

  return sharp(await webPImage.save(null), options);