如何识别webp图片是静态的还是动画的？答案

【问题标题】：How to identify whether webp image is static or animated?如何识别webp图片是静态的还是动画的？
【发布时间】：2017-12-24 17:16:40
【问题描述】：

我正在开发一个用户可以上传webp 图像的项目。我知道如何将webp 图像转换为 jpg/png，但我一直坚持如何识别webp 图像是静态（非动画）还是动画。

我想识别它们，因为我使用不同的命令进行转换：

非动画 webp 到 jpg 的命令：

dwebp nonanimated.webp -o jpg.jpg

动画 webp 到非动画 webp 的命令（需要第二帧）：

webpmux -get frame 2 animated.webp -o nonanimated.webp

但我找不到可以处理这两种情况的单个命令。

我在服务器端使用 PHP，在前端使用 HTML 和 Javascript。

【问题讨论】：

据我所知只有 GIF 可以动画
如果 ^^ 正确，您可以使用 php 手册 secure.php.net/manual/en/function.imagecreatefromgif.php#59787 中的此代码
此代码只检查gif 而不是webp。 Webp也可以动画，请使用Chrome浏览器查看cloudinary.com/blog/…
你不能检查文件是否有框架？如果它有超过 1 则视为动画，否则它必须是静态的...
如何查看？

标签： javascript php webp

【解决方案1】：

经过大量调查，我发现动画webp 图像总是包含一些字符串，当在文本编辑器中打开时，非动画图像不会。字符串是ANMF 和ANIM。我在我拥有的所有 webp 图像中检查了这些字符串。所以这对我来说是完美的。以下是PHP、Javascript和Shell Script中的一些解决方案：

在 PHP 中：

<?php
function isWebpAnimated($src){
    $webpContents = file_get_contents($src);
    $where = strpos($webpContents, "ANMF");
    if ($where !== FALSE){
        // animated
        $isAnimated = true;
    }
    else{
        // non animated
        $isAnimated = false;
    }
    return $isAnimated;
}
?>

在 Javascript 中：

function isAnimatedGif(src) {
    var request = new XMLHttpRequest();
    request.open('GET', src, true);
    request.addEventListener('load', function () {
        if(request.response.indexOf("ANMF") != -1){
            // animated
            alert(true);
        }
        else{
            // non animated
            alert(false);
        }
    });
    request.send();
}

但是如果大图像PHP 和Javascript 不能正常工作，所以最好的解决方案是使用Shell Script，如果你有Ubuntu。

在 Shell 脚本中：

echo $(grep -c "ANMF" ~/animated.webp)

如果非动画则返回 0，否则动画则返回非零值。

【讨论】：

请注意，当文件中的某些字节碰巧包含与字符串“ANMF”相同的二进制值时，此解决方案会在极少数情况下产生误报。按照其他答案中的建议解析 webp 标头会更可靠。
此外，对于任何大小的文件，它的工作速度同样快，因为您只需要在文件的开头读取几个字节。

【解决方案2】：

根据Sven Liivak的isWebpAnimated()...有一个小bug。

fseek($fh, 16);

应该是：

fseek($fh, 20);

因为16 的位置是VP8X 中的chunk_size 位置。但我们需要flag 位置，即20。

固定功能：

function isWebpAnimated($fn){
  $result = false;
  $fh = fopen($fn, "rb"); 
  fseek($fh, 12);
  if(fread($fh, 4) === 'VP8X'){
    fseek($fh, 20);
    $myByte = fread($fh, 1);
    $result = ((ord($myByte) >> 1) & 1)?true:false;
  }
  fclose($fh);
  return $result;
}

【讨论】：

【解决方案3】：

Webp 标头中有标志，动画等。检查它的小功能：

function isWebpAnimated($fn){
  $result = false;
  $fh = fopen($fn, "rb"); 
  fseek($fh, 12);
  if(fread($fh, 4) === 'VP8X'){
    fseek($fh, 16);
    $myByte = fread($fh, 1);
    $result = ((ord($myByte) >> 1) & 1)?true:false;
  }
  fclose($fh);
  return $result;
}

ANIM 和 ANMF 来自下一个块头。

RIFF container specification

【讨论】：