Как изменить размер анимированного веб-сайта？

Я хочу иметь возможность изменять размер динамического веб-сайта.Пример изображения . Я нашел этот сайт именно для этого.

Итак, как я могу реализовать нечто подобное в своей программе? Я пробовал использовать 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.
Источник

1 ответ

Cwebp от Google может изменять размер изображений WebP, но, как ни странно, не анимированных.

Мне удалось успешно использовать Sharp — пакет npm, основанный на libvips.

Возможно, масштабирование работает через CLI libvips . В противном случае пример сценария Sharp (для запуска с помощью node.js) может выглядеть так:

      #!/usr/bin/env node

import * as fs from 'node:fs';
import sharp from 'sharp';

const dir = await fs.promises.opendir('./source');
const buffers = [];
for await (const dirent of dir) {
  if (dirent.isFile()) {
    buffers.push([
      dirent.name, fs.createReadStream('./source/'+dirent.name),
    ]);
  }
}

const width = 128; // change to your target width

await fs.promises.mkdir('./resized/');

for (const _buf of buffers) {
  const pipeline = sharp({ pages: -1, })
    .resize({ width, height: width, fit: 'inside' })
    .toFile('./resized/'+_buf[0]);

  try {
    await _buf[1].pipe(pipeline);
  } catch (e) {
    console.log('problem: '+e);
  }
}
Источник
Другие вопросы по тегам