ImageDecoder 获取GIF动图帧数 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ImageDecoder</title>
  </head>
  <body>
    <h3 id="frame"></h3>
    <input type="file" onchange="selectImg(event)" />
    <img src="http://localhost:14909/ji.gif" alt="" id="img" />
    <script>
      const img = document.getElementById('img');

      // fetch('http://localhost:14909/ji.gif').then(async (res) => {
      //   // console.log("res => ", await res.body)
      //   // getFPS(res.body);

      //   const newImg = document.createElement('img');
      //   newImg.src = 'http://localhost:14909/ji.gif';
      //   newImg.crossOrigin = 'cors';
      //   newImg.onload = () => {
      //     const canvas = document.createElement('canvas');
      //     const ctx = canvas.getContext('2d');
      //     canvas.width = newImg.width;
      //     canvas.height = newImg.height;
      //     ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height);
      //     // canvas.toBlob((blob) => {
      //     //   console.log("blob => ", blob)
      //     //   getFPS(blob.stream());
      //     // }, 'image/gif', 1);

      //     // canvas.toBlob((blob) => {
      //     //   console.log("blob => ", blob)
      //     // }, 'image/gif', 1)
      //     canvas.toBlob(
      //       (blob) => {
      //         const file = new File([blob], 'ji.gif', { type: 'image/gif' });
      //         console.log(file);
      //         const img = new Image()
      //         img.src = URL.createObjectURL(file)
      //         img.onload = () => {
      //           document.body.appendChild(img)
      //         }
      //         // getFPS(file.stream());
      //         // 将file对象传递给需要使用它的函数
      //       },
      //       'image/gif',
      //       1
      //     );
      //   };
      //   // getFPS(file.stream());
      // });

      function selectImg(e) {
        /** @type {File} file */
        const file = e.target.files[0];
        const blob = new Blob([file]);

        // const url = URL.createObjectURL(blob);
        // fetch(url).then((res) => {
        //   getFPS(res.body);
        //   URL.revokeObjectURL(url);
        // });

        // getFPS(blob.stream());

        getFPS(file.stream())
      }

      async function getFPS(data) {
        let isSupport = await ImageDecoder.isTypeSupported("image/gif");
        if (!isSupport) throw new SyntaxError('暂不支持')

        const imageDecoder = new ImageDecoder({
          // data: buf,
          // data: res.body,
          data,
          type: 'image/gif',
        });

        console.log('imageDecoder => ', imageDecoder);

        // 获取GIF的第一帧图形数据
        // imageDecoder.decode({ frameIndex: 0 }).then((res) => {
        //   console.log('res => ', res);
        // });
        await imageDecoder.decode();
        await imageDecoder.completed;
        const frameCount = imageDecoder.tracks[0].frameCount;
        await imageDecoder.close()

        document.getElementById('frame').textContent = `总帧数【${frameCount}】`;
        console.log('总帧数 => ', frameCount);
      }
    </script>
  </body>
</html>
posted @ 2024-04-11 14:24  _clai  阅读(48)  评论(0)  编辑  收藏  举报