如何拍摄gif快照？

Question

我想创建缩略图组件来从 url 播放 gif。在玩之前，我想使用关于 gif 的快照。是否有可能或有什么方法可以对播放的 gif 进行快照？

我的示例组件：

 import React, { useState, useEffect } from 'react'
            
  interface IProps {
      thumbnailPlayUrl: string;
  }
            
  export default function Thumbnail({ thumbnailPlayUrl }: IProps) {
  const [status, setstatus] = useState("stop")
            
  useEffect(() => {}, [])
            
  return (
                   
       <div onMouseLeave={() => setstatus("stop")}>
            
             <div  className="static" style={status == "play" ? {} : { display: "none" }} >
    
                     <img src={thumbnailPlayUrl} alt={thumbnailPlayUrl} />
    
             </div>
            
            
             <div  style={status == "play" ? { display: "none" } : {}} onMouseOver={() => setstatus("play")}>
                {/*
                   <img 
                    src={require("../../assets/images/video-play-icon-2.png")}  <---- Example with play icon 
                    alt={thumbnailSnapshotUrl} />
                 */}
    
                    <img 
                    src={"exampleThumbnailSnapshotUrl"} {/* <----- I want snapshot url here like .jpg , .png about */}
                    alt={"exampleThumbnailSnapshotUrl"} /> 
             </div>
            
       </div>
            
                   
                )
            }