js cavas截图

最新推荐文章于 2024-08-13 09:34:30 发布

qq_duhai

最新推荐文章于 2024-08-13 09:34:30 发布

阅读量2k

点赞数

分类专栏： java 截图上传

java 同时被 2 个专栏收录

94 篇文章 1 订阅

订阅专栏

截图上传

2 篇文章 0 订阅

订阅专栏

<!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 οnclick="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>

如果跨域会报错的