<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video id="player_html5_api" autoplay controls="controls"> <source src="images/视频.mp4" crossOrigin="anonymous"/> </video> <button onclick="cut()">截图</button> <div id="imgOut"></div> <script> var cut = function (){ var scale = 0.25; var video = document.getElementById("player_html5_api"); var canvas = document.createElement("canvas"); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); canvas.setAttribute("id", "canvas"); document.getElementById("imgOut").append(canvas) console.log(canvas.toDataURL()); } </script> </body> </html>
注:
① canvas.toDataURL()会报错
②实际项目中,需要上传图片接口,获取图片的url