使用 HTML5 控制摄像头摄像和拍照并保存图像文件到本地

最新推荐文章于 2024-05-16 10:23:10 发布

allway2

最新推荐文章于 2024-05-16 10:23:10 发布

阅读量1.7k

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/allway2/article/details/120633054

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="generator" content="PSPad editor, www.pspad.com">
        <title></title>
    </head>
    <body>

    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <button id="save">Save Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script type="text/javascript">

        // Grab elements, create settings, etc.
        var video = document.getElementById('video');

        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // Not adding `{ audio: true }` since we only want video now
            navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            });
        }

        /* Legacy code below: getUserMedia 
         else if(navigator.getUserMedia) { // Standard
         navigator.getUserMedia({ video: true }, function(stream) {
         video.src = stream;
         video.play();
         }, errBack);
         } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
         navigator.webkitGetUserMedia({ video: true }, function(stream){
         video.src = window.webkitURL.createObjectURL(stream);
         video.play();
         }, errBack);
         } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
         navigator.mozGetUserMedia({ video: true }, function(stream){
         video.srcObject = stream;
         video.play();
         }, errBack);
         }
         */

        // Elements for taking the snapshot
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });

        function saveAsLocalImage() {
            var myCanvas = document.getElementById("canvas");
            // here is the most important part because if you dont replace you will get a DOM 18 exception.  
            // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
            var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            // window.location.href = image; // it will save locally  
            // create temporary link  
            var tmpLink = document.createElement('a');
            tmpLink.download = 'image.png'; // set the name of the download file 
            tmpLink.href = image;

            // temporarily add link to body and initiate the download  
            document.body.appendChild(tmpLink);
            tmpLink.click();
            document.body.removeChild(tmpLink);
        }

        // Trigger photo save
        document.getElementById("save").addEventListener("click", function () {
            saveAsLocalImage();
        });
    </script>
</body>
</html>

allway2

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
使用 HTML5 控制摄像头摄像和拍照并保存图像文件到本地

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"&g.
复制链接

扫一扫