js cavas截图

来源：互联网发布：edg网络黄金官方网站编辑：程序博客网时间：2024/06/05 07:30
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>capture screen</title>    </head>    <body>        <video id="video" controls="controls" crossorigin="anonymous">            <source src="http://oss-cn-hangzhou.aliyuncs.com/tsnrhapp/circle/videos/2a46579b57c479b22b2e8d69d7a85236.mp4">        </video>        <div id="output"></div>        <button onclick="jietu()">截图</button>        <script type="text/javascript">            (function() {                var video, output;                var scale = 0.8;                var initialize = function() {                    output = document.getElementById("output");                    video = document.getElementById("video");                    video.addEventListener('loadeddata', captureImage);                };                var captureImage = function() {                    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);                    var img = document.createElement("img");                    img.src = canvas.toDataURL("image/png");                    output.appendChild(img);                };                initialize();            })();            function jietu(){                var scale = 0.8;                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);                    var img = document.createElement("img");                    img.src = canvas.toDataURL("image/png");                    output.appendChild(img);            }        </script>    </body></html>
如果跨域会报错的
阅读全文
0 0