How to Extract High-Resolution Still Frames from Video

When extracting a frame from a video, many casual users take a operating system screenshot of their media player. This results in a degraded image constrained by screen resolution and scaling factors. In contrast, programmatically extracting a frame via HTML5 Canvas inspects the video's true `videoWidth` and `videoHeight` properties: - A 4K video (3840x2160) played on a standard 1080p laptop screen will yield a true full-resolution 3840x2160 frame when extracted via Canvas, capturing every raw pixel of the source video stream.

Videos use temporal compression consisting of **I-frames (Keyframes)** containing full image data, and **P/B-frames** containing only delta changes between frames. When seeking to a precise timestamp: 1. Setting `video.currentTime = targetTime` instructs the browser demuxer to seek to the nearest keyframe and compute forward deltas. 2. Listening to the `seeked` event ensures the video element has completely decoded the target frame buffer before drawing to the canvas. 3. Drawing before the `seeked` event fires causes blank or stale frame captures.

When exporting still frames: - **PNG:** Lossless extraction. Preserves crisp graphic text, subtle color gradients, and sharp edges. Ideal for graphic overlays and thumbnail design. - **JPEG (Quality 0.90+):** Produces 70–80% smaller file sizes with negligible visible degradation on photographic scenes. Ideal for rapid photo sharing and contact sheets.