1. First get the video element and create the canvas
|
1
2
3
|
const video = document.getElementById('video');const canvas = document.createElement("canvas");const canvasCtx = canvas.getContext("2d") |
2. Pixel size and optimization of screenshots
devicePixelRatio can return the ratio of the physical pixel resolution of the current display device to the CSS pixel resolution, which can better restore the real video scene. Please refer to the official website for details.
|
1
2
|
const ratio = window.devicePixelRatio || 1;canvasCtx.scale(ratio, ratio); |
3. Process the canvas canvas
// The canvas size is the same as the image size, and the screenshot has no extra canvas.width = video.offsetWidth * ratio; canvas.height = video.offsetHeight * ratio;
4. Generate canvas and convert it into the format you need. I will convert it directly to base64 here.
canvasCtx.drawImage(video, 0, 0 , canvas.width, canvas.height) const imgBase64 = canvas.toDataURL("image/png");
Read More:
- Jquery use queue to implement Ajax request queue Simple Example
- Electron: How to Use BrowserWindow to Create a Window
- Python: How to Create List by Comprehension (Example Codes)
- Windows Core Audio APIs: How to Progress Loopback Recording and Generate WAV File
- Docker: How to build a rabbitmq image cluster
- Android: How to get the size of font you set (Example Code)
- torch.max Example (How to Use)
- How to Use Printf in HAL Library
- Android: How to Add Background Music for Activity with Service
- C#: How to Get details of the directory where the currently running program is located
- Base64 Image Compression Example
- Websocket Front-end Call Example
- Hutool Excel Import & Export Example
- Matplotlib Draw 3D scatter Diagram Example
- MAFIA: 1- OpenFlow statistics (Counters, Timestamps)(mafia-sdn/p4demos/demos/1-openflow/1.1-statistics/p4src/of.p4)
- Open CASCADE Technology 7.7.0 released
- Flutter & Dart every() Method Example
- Flutter & Dart Regular Expression Examples
- File class details (get the file name, size, path, create, etc.)
- Opentelemetry + Jaeger Python Version Cross Service Call Example