如何调整动画 webp 的大小？

Question

我希望能够更改动态 webp 的大小。 样本图片。我发现这个网站就是这样做的。

那么我怎样才能在我自己的程序中实现类似的东西呢？我尝试使用 ImageMagick7 或 ffmpeg5，但失败了。

环境：

cat /etc/redhat-release：CentOS Linux 版本 7.8.2003（核心）

1.尝试了ffmpeg：

[developer@Dev_Payment_229 ~]$ /opt/ffmpeg-5/ffmpeg -i b.webp -vf "scale=320:-1" b_320.webp
ffmpeg version 5.1.1-static https://johnvansickle.com/ffmpeg/  Copyright (c) 2000-2022 the FFmpeg developers
  built with gcc 8 (Debian 8.3.0-6)
  configuration: --enable-gpl --enable-version3 --enable-static --disable-debug --disable-ffplay --disable-indev=sndio --disable-outdev=sndio --cc=gcc --enable-fontconfig --enable-frei0r --enable-gnutls --enable-gmp --enable-libgme --enable-gray --enable-libaom --enable-libfribidi --enable-libass --enable-libvmaf --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librubberband --enable-libsoxr --enable-libspeex --enable-libsrt --enable-libvorbis --enable-libopus --enable-libtheora --enable-libvidstab --enable-libvo-amrwbenc --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libdav1d --enable-libxvid --enable-libzvbi --enable-libzimg
  libavutil      57. 28.100 / 57. 28.100
  libavcodec     59. 37.100 / 59. 37.100
  libavformat    59. 27.100 / 59. 27.100
  libavdevice    59.  7.100 / 59.  7.100
  libavfilter     8. 44.100 /  8. 44.100
  libswscale      6.  7.100 /  6.  7.100
  libswresample   4.  7.100 /  4.  7.100
  libpostproc    56.  6.100 / 56.  6.100
[webp @ 0x7686f40] skipping unsupported chunk: ANIM
[webp @ 0x7686f40] skipping unsupported chunk: ANMF
    Last message repeated 10 times
[webp @ 0x7686f40] image data not found
[webp_pipe @ 0x7685700] Could not find codec parameters for stream 0 (Video: webp, none): unspecified size
Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
Input #0, webp_pipe, from 'b.webp':
  Duration: N/A, bitrate: N/A
  Stream #0:0: Video: webp, none, 25 fps, 25 tbr, 25 tbn
Stream mapping:
  Stream #0:0 -> #0:0 (webp (native) -> webp (libwebp_anim))
Press [q] to stop, [?] for help
[webp @ 0x7697600] skipping unsupported chunk: ANIM
[webp @ 0x7697600] skipping unsupported chunk: ANMF
    Last message repeated 10 times
[webp @ 0x7697600] image data not found
Error while decoding stream #0:0: Invalid data found when processing input
Cannot determine format of input stream 0:0 after EOF
Error marking filters as finished
Conversion failed!

看来ffmpeg无法识别这个动态WebP图像。

2.尝试过ImageMagick7

安装：

 yum -y install libwebp-devel libwebp-tools
[root@Dev_FTP_241 developer]# yum list installed | grep webp
libwebp.x86_64                         0.3.0-11.el7               @updates
libwebp-devel.x86_64                   0.3.0-11.el7               @updates
libwebp-tools.x86_64                   0.3.0-11.el7               @updates

源代码：

https://github.com/ImageMagick/ImageMagick/archive/refs/tags/7.1.1-0.tar.gz
tar -xvf ImageMagick-7.1.1-0.tar.gz
./configure --with-webp --prefix=/usr/local/imagemagick
make
make install

单个 WebP 可以调整大小：

[root@Dev_FTP_241 developer]#  /usr/local/imagemagick/bin/convert -resize 480  simple.webp simple_480.webp
Decoded /tmp/magick-LNPdXgk2zDpiuU6Qv9CpDups3560EATh. Dimensions: 2160 x 608. Now saving...
Saved file /tmp/magick-Q8JHRZZOXdp1r1x187eftzsFlw8AqAuo

但动画 WebP 失败了：

[root@Dev_FTP_241 developer]#  /usr/local/imagemagick/bin/convert -resize 480  b.webp b_480.webp
Error! Decoding of an animated WebP file is not supported.
       Use webpmux to extract the individual frames or
       vwebp to view this image.
Decoding of /tmp/magick-jMiy7ytmAnBzpS8UpafCQ5B44BjDTUSD failed.
Status: 4 (UNSUPPORTED_FEATURE)
convert: delegate failed `'dwebp' -pam '%i' -o '%o'' @ error/delegate.c/InvokeDelegate/1924.
convert: unable to open file '/tmp/magick-D-NMEGWU_a0IypZWwTpYiWIE61nteoig': No such file or directory @ error/constitute.c/ReadImage/786.
convert: no images defined `b_480.webp' @ error/convert.c/ConvertImageCommand/3342.

Answer 1

截至目前，ffmpeg似乎不支持解码。.webp

ImageMagick 具有这种能力。您需要确保libwebpdemux在您的系统中可用，并且您的 ImageMagick 版本已启用 WebP 支持。然后使用这个命令对我有用：

magick input.webp -resize 50% -layers coalesce output.webp

-layers coalesce需要标准化框架，否则框架尺寸会出现错误。

Answer 2

Google\xe2\x80\x99s cwebp 可以调整 WebP 图像的大小，但奇怪的是不能调整动画图像的大小。

\n

我成功尝试使用Sharp，这是一个基于libvips的 npm 包。

\n

也许重新缩放可以通过libvips CLI进行。如果没有，示例 Sharp 脚本（与 Node.js 一起运行）可能如下所示：

\n

#!/usr/bin/env node\n\nimport * as fs from \'node:fs\';\nimport sharp from \'sharp\';\n\nconst dir = await fs.promises.opendir(\'./source\');\nconst buffers = [];\nfor await (const dirent of dir) {\n  if (dirent.isFile()) {\n    buffers.push([\n      dirent.name, fs.createReadStream(\'./source/\'+dirent.name),\n    ]);\n  }\n}\n\nconst width = 128; // change to your target width\n\nawait fs.promises.mkdir(\'./resized/\');\n\nfor (const _buf of buffers) {\n  const pipeline = sharp({ pages: -1, })\n    .resize({ width, height: width, fit: \'inside\' })\n    .toFile(\'./resized/\'+_buf[0]);\n\n  try {\n    await _buf[1].pipe(pipeline);\n  } catch (e) {\n    console.log(\'problem: \'+e);\n  }\n}\n

\n