• Html5使用摄像头


    Html

    <div id="contentHolder">
            <video id="video" width="320" height="320" autoplay>
            </video>
            <button id="snap" style="display: none">
                拍照
            </button>
            <canvas style="display: none" id="canvas" width="320" height="320">
            </canvas>
        </div>
        <div>
            <input type="button" value="拍照" onclick="CatchCode()" /></div>
    

    Js

    //这段代 主要是获取摄像头的视频流并显示在Video 签中           
            window.addEventListener("DOMContentLoaded", function () {
                var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };
                //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow       
                if (navigator.getUserMedia) {
                    navigator.getUserMedia(videoObj, function (stream) {
                        video.src = stream;
                        video.play();
                    }, errBack);
                } else if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia(videoObj, function (stream) {
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, errBack);
                }
                //这个是拍照按钮的事件,          
                $("#snap").click(function () {
                    context.drawImage(video, 0, 0, 320, 320);
                    //CatchCode();           
                });
            }, false);
    
            //这个是 刷新上 图像的        
            function CatchCode() {
                //$("#snap").click();
                document.getElementById("canvas").getContext("2d").drawImage(video, 0, 0, 320, 320);
                //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途    
                var canvans = document.getElementById("canvas");
                //获取浏览器页面的画布对象                       
                //以下开始编 数据   
                var imgData = canvans.toDataURL();
                //将图像转换为base64数据
                var base64Data = imgData.substr(22);
                //在前端截取22位之后的字符串作为图像数据       
                //开始异步上             
                $.post("Html5UseCamera.aspx?action=upload", { "img": base64Data }, function (data, status) { }, "text");
            }      
    

      C#

    byte[] imgBytes = Convert.FromBase64String(Request.Form["img"]);
                Stream stream = new MemoryStream(imgBytes);
                System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
                image.Save(Server.MapPath("~/") + Guid.NewGuid().ToString() + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
    

      

  • 相关阅读:
    zabbix自定义监控mysql
    [学习笔记]动态树Link-Cut-Tree
    关于 /etc/zabbix/zabbix_agentd.conf 文件 Hostname 文件的说明
    NOIP2018 游记
    Centos7安装Zabbix3.4
    [学习笔记]动态dp
    Java实现 泊松分酒
    关于使用索引的一些经验
    OI生涯回忆录 2017.9.10~2018.11.11
    覆盖索引小结
  • 原文地址:https://www.cnblogs.com/Lance-Lan/p/3577689.html
Copyright © 2020-2023  润新知