zoukankan      html  css  js  c++  java
  • Web调用安卓,苹果手机摄像头,本地图片和文件

    由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测试过QQ浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>上传图片</title>
        <meta charset="utf-8">
    </head>
    <body>
        <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
        <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
    
            <div>
                <div>
                    <input type="file" name="file_head" id="file_head" οnchange="javascript:setImagePreview();" />
                </div>
                <div>
                    <div id="DivUp" style="display: none">
                        <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
                    </div>
                </div>
            </div>
        </form>
        <div data-role="fieldcontain">
            <div id="localImag">
                <img id="preview" width="-1" height="-1" style="display: none" />
            </div>
        </div>
            
    
        <script type="text/javascript">
            function setImagePreview() {
                var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
                picture = file_head.value;
                if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),
                !1;
                if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
                    preview.style.width = "63px",
                    preview.style.height = "63px",
                    preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
                else {
                    file_head.select(),
                    file_head.blur(),
                    img_txt = document.selection.createRange().text,
                    localImag = document.getElementById("localImag"),
                    localImag.style.width = "63px",
                    localImag.style.height = "63px";
                    try {
                        localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
                        localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
                    } catch(f) {
                        return alert("您上传的图片格式不正确,请重新选择!"),
                        !1
                    }
                    preview.style.display = "none",
                    document.selection.empty()
                }
                return document.getElementById("DivUp").style.display = "block",
                !0
            }
        </script>
    </body>
    </html>

     <video id="video" controls="controls" width="80%" heigth="80%" autoplay=""  ></video>  
    <div><button id='picture' style=" 100%;">PICTURE</button></div>  
    <canvas id="canvas" width="640" height="480"></canvas>  
    <script type="text/javascript">  
    var video = document.getElementById("video");  
    var context = canvas.getContext("2d");  
    var errocb = function () {  
        console.log('sth wrong!');  
    }  
      
    if (navigator.getUserMedia) { // 标准的API  
        navigator.getUserMedia({ "video": true }, function (stream) {  
            video.src = stream;  
            video.play();  

        }, errocb);  
    } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API  
        navigator.webkitGetUserMedia({ "video": true }, function (stream) {  
            video.src = window.webkitURL.createObjectURL(stream);  
            video.play();  
        }, errocb);  
    }  
      
    document.getElementById("picture").addEventListener("click", function () {  
        context.drawImage(video, 0, 0, 640, 480);  
    });  
    </script> 

    https://bbs.csdn.net/topics/391879845

  • 相关阅读:
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车按键启动和蜂鸣器报警
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车指定花式动作
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    ZYAR20A 亚克力2驱 蓝牙 298寻迹避障机器人 —— 小车前后左右综合实验
    asp中设置session过期时间方法总结
    asp中设置session过期时间方法总结
    ASP.NET关于Session_End触发与否的问题
  • 原文地址:https://www.cnblogs.com/lydg/p/11362160.html
Copyright © 2011-2022 走看看