reactjs 使用Javascript解码动画WebP(React / NextJS)

xhv8bpkk  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(182)

我正在尝试解码WebP动画图像。我希望提取组成动画的以及每帧的延迟
知道如何在React / NextJS环境中使用JavaScript解码动画WebP图像吗
我找到了node-webpmux(https://github.com/ApeironTsuka/node-webpmux),它是JavaScript的webpmux(https://developers.google.com/speed/webp/docs/webpmux?hl=es-419)。但是,它不兼容,因为它第一次尝试使用FS时在浏览器上崩溃,与React / NextJS不兼容。

hi3rlvi2

hi3rlvi21#

我目前正在使用这个框架,我看到我的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);

相关问题