js視訊抓圖
阿新 • • 發佈：2018-12-10
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <video id="video" src="0001-0120.mkv" loop autoplay></video> <button onclick="capture()">抓圖</button> <canvas id="canvas" width="400" height="300"></canvas> </body> <script> ctx = canvas.getContext("2d"); function capture(){ ctx.drawImage(video, 0, 0, 400, 300); } </script> </html>
獲取影象資訊 let imageData = canvas.toDataURL(); 預設是"image/png”格式的影象資訊
data:image/png;base64,影象資料img.src = imageData 可以直接使用