html5視訊截圖實現
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1"> <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script> <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script> <title>video</title> <style> body, html { width: 100%; height: 100%; } video { width: 400px; } canvas { width: 200px; } </style> </head> <body> <video src="video.mp4" controls autoplay></video> <div class="cut">點選截圖</div> <canvas></canvas> <script> ;$(function() { var $canvas = $('canvas'); var $video = $('video'); $canvas.attr({ width: $video.width(), height: $video.height(), }); $video[0].onloadstart = function(e) { console.log(e.srcElement.videoWidth); console.log(this.videoWidth); } var ctx = $canvas[0].getContext('2d'); $('.cut').on('click', function() { var w = $video[0].videoWidth;//視訊原有尺寸 var h = $video[0].videoHeight;//視訊原有尺寸 $canvas.attr({ width: w, height: h, }); ctx.drawImage($video[0], 0, 0, w, h); var base64 = $canvas[0].toDataURL('images/png'); console.log(base64); }); }); </script> </body>