H5 苹果安卓拍照demo

最新推荐文章于 2023-05-30 19:57:18 发布
最新推荐文章于 2023-05-30 19:57:18 发布
阅读量236 收藏 1
点赞数
分类专栏： javascript 文章标签： SAP 移动拍照 质量报告 上传 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luozhangqian/article/details/119809255
版权 
   近期公司要上一个现场拍照方案，从SAP获取质量拍照任务，然后现场人员从自己手机端拍照，上传到系统中，最后出质量客户报告。
   废话不多，上代码：：：

<html>
<head>
    <title>图片上传登陆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../../css/layui.css">
    <!-- 引入 layui.js -->
    <script src="../../js/layui.js"></script>
    <script src="../../js/jquery-2.1.1.min.js" type="text/javascript"></script>  
</head>
<body>
<style>
    body{
        font-size: 14px;
    }
    #snap{
        width: 50px;
        height: 50px;
        background: #59A869;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 85%;
        margin-left: -25px;
    }
    #backEnd{
        width: 50px;
        height: 50px;
        background: #fff;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 55%;
        margin-left: -25px;
    }
    #zoomIn{
        width: 50px;
        height: 50px;
        background: #fff;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 40%;
        margin-left: -25px;
    }
    #zoomOut{
        width: 50px;
        height: 50px;
        background: #fff;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 25%;
        margin-left: -25px;
    }
    #back{
        width: 50px;
        height: 50px;
        background: #fff;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 10%;
        margin-left: -25px;
    }
    #save{
        width: 50px;
        height: 50px;
        background: #fff;
        box-shadow: 0 0  5px #fff;
        border-radius: 50px;
        position: fixed;
        bottom: 40px;
        left: 70%;
        margin-left: -25px;
    }
    #show{
        height: 100px;
        width: 200px;

    }
    #showView{
        margin: 30px;
    }

</style>
 
<div align=center>
<%--    autoplay loop playsinline 参数支持苹果手机浏览器--%>
    <video id="video"  autoplay loop playsinline ></video>
    <canvas style="background-color: black;" id="canvas"  ></canvas>
    <button id="snap">拍</button>
    <button id="back" onclick="goback()"><i class="layui-icon layui-icon-return layui-font-12"></i></button>
    <button id="save" onclick="upload([[${zaufnr}]],[['${no}']],[[${noChild}]])"><i class="layui-icon layui-icon-ok layui-font-12"></i></button>
    <button id="zoomIn">大</button>
    <button id="zoomOut">小</button>
    <button id="backEnd">后</button>
    <div id="showView">
        <img id="show" alt=""/>
    </div>
</div>
</body>
<script type="text/javascript">

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
    let img;
    // var vConsole = new VConsole();
    // polyfill 提供了这个方法用来获取设备的 pixel ratio
    var getPixelRatio = function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;

        return (window.devicePixelRatio || 1) / backingStore;
    };
    //屏幕 大小
    //设置屏幕为横屏
    var screen_height = document.documentElement.clientHeight;
    var screen_width=document.documentElement.clientWidth;

    //视频横屏

    // var Vwidth=screen_width;//480;//视频显示宽
    var Vwidth=screen_width;//视频显示宽
    if(screen_height>screen_width)screen_height=screen_width;
    var VHeight=screen_height;//视频显示高
    // var VHeight=screen_height;//480;//视频显示高

    var Qwidth = ${width};//取景框 宽
    var Qheight = ${height};//取景框 高
    var QlocalX=screen_width/2 -Qwidth/2;//140;
    var QlocalY=screen_height/2-Qheight/2;// 140;

    var isFinish = '${isFinish}';
    var path = '${path}';
    // 监听 orientation changes
    window.addEventListener("orientationchange", function(event) {
         location.reload();
    }, false);



    function getUserMedia(constraints, success, error) {

        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
//firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }
    var videos  = new Array();
    function success(stream) {
        // let CompatibleURL = window.URL || window.webkitURL;
        // video.src = window.webkitURL.createObjectURL(stream);
        // video.mediaStreamTrack  = stream;
        // video.srcObject = stream;
        // video.play();
        //旧的浏览器可能没有srcObject

        if("srcObject" in video) {
            video.srcObject=stream;

        }else{//防止在新的浏览器里使用它，应为它已经不再支持了
            video.src=window.URL.createObjectURL(stream);
        }

        video.onloadedmetadata= function(e) {
            video.play();
        };
    }
    function error(error) {
        alert("error")
    }
    //打开摄像头
    var useFrontCamera=false;//true前置摄像头， false后置摄像头
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        openVideo();
    } else {
    }
    //打开摄像头
    function openVideo(){
        var videoMode=useFrontCamera ? 'user' : { exact: 'environment' };
        getUserMedia({video : {
                facingMode: videoMode,
                width: Vwidth,
                height: VHeight
            }}, success, error);
    }
    window.onload = function(){
        init();
    }
    // 初始化屏幕大小
    canvas.width=canvas.width=video.width=Vwidth;
    canvas.height=video.height=VHeight;
    var dpr= getPixelRatio(context);
    // 获取css的宽高
    let { width: cssWidth, height: cssHeight } = canvas.getBoundingClientRect();
    // 不停的截图
    function init()
    {
         video.style.display="none";
        var i = window.setInterval(function () {
            //对video进行截图
            context.drawImage(video, 0, 0, Vwidth, VHeight);
            context.strokeStyle=  "#ff0000";
            context.strokeRect(QlocalX,QlocalY,Qwidth,Qheight);//x,y,w,h
        }, 10)//10ms
        QlocalX=Vwidth/2 -Qwidth/2;//140;
        QlocalY=VHeight/2-Qheight/2;// 140;
    }



    // 拍照按钮
    var snap = document.querySelector('#snap');
    if(snap !== null){
        snap.onclick=function(){
            context.drawImage(video, QlocalX,QlocalY,Qwidth,Qheight,0,0,Vwidth, VHeight);//图形大小
            // document.querySelector('img').src = canvas.toDataURL('image/webp',1);
            document.querySelector('img').src = canvas.toDataURL('image/jpeg',1);//1标识高清
            document.getElementById('showView').style.display="block";
        }
    }
    //切换到后端摄像头
    var backEnd = document.querySelector('#backEnd');
    if(backEnd !== null){
        backEnd.onclick=function(){
            if (useFrontCamera)
            useFrontCamera=false;//true前置摄像头， false后置摄像头
            else
            useFrontCamera=true;//true前置摄像头， false后置摄像头
            openVideo();
        }
    }
    //取景框放大
    var zoomIN = document.querySelector('#zoomIn');
    if(zoomIN !== null){
        zoomIN.onclick=function(){
            //按比例放大缩小
            Qwidth=Qwidth*0.1+Qwidth;
            Qheight=Qheight*0.1+Qheight;
            QlocalX=Vwidth/2 -Qwidth/2;//140;
            QlocalY=VHeight/2-Qheight/2;// 140;
        }
    }
    //取景框缩小
    var zoomOut = document.querySelector('#zoomOut');
    if(zoomOut !== null){
        zoomOut.onclick=function(){
            //按比例放大缩小
            Qwidth=Qwidth-Qwidth*0.1;
            Qheight=Qheight-Qheight*0.1;
            QlocalX=Vwidth/2 -Qwidth/2;//140;
            QlocalY=VHeight/2-Qheight/2;// 140;
        }
    }
    //显示框
    var show = document.querySelector('#show');
    var showView = document.querySelector('#showView');
    show.style.width = Qwidth;
    show.style.height = Qheight;
    if (isFinish == 'Y'){
        document.querySelector('img').src ='/static'+path+'?time='+new Date();
        document.getElementById('showView').style.display="block";
    }else{
        document.getElementById('showView').style.display="none";
    }
    ///放大缩小
    function upload(zaufnr,no,noChild){
        var fileName = zaufnr+'_'+no+'_'+noChild;
        console.log(fileName)
        var file = dataURLtoFile(document.querySelector('img').src,fileName);
        var fd = new FormData();
        fd.append("file",file);
        fd.append("zaufnr",zaufnr);
        fd.append("no",no);
        fd.append("isFinish",isFinish);
        fd.append("noChild",noChild);
        $.ajax({
            type: "post",
            url: "../../api/img/upload",
            contentType: false,
            cache: false,
            processData: false,
            data: fd, //fromData,
            success: function (res) {
                if (res != null && res.code == 200) {
                    layer.msg("上传成功", {
                        icon: 6,
                        time: 2000
                    }, function () {
                        //返回上一页
                        window.location.href = '../../detail/'+zaufnr;
                    });
                } else {
                    layer.open({
                        title: '上传失败',
                        content: res.message,
                        icon: 5,
                        anim: 6
                    });
                }
            },
        });
    }
    //dataURLtoFile
    function dataURLtoFile(dataUrl, fileName){
        var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], fileName, {type:mime});
    }
    //返回
    function goback(){
        window.location.href = '../../detail/${zaufnr}';
    }
</script>
</html>

 

罗章钱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端H5上下滑屏翻页demo
03-27
描述部分提到“本人已做优化”，这意味着这个H5 demo已经过性能和适配性的调整，可以在不同尺寸的移动设备上正常工作，并且用户可以直接在分页内容中添加新的元素，而无需复杂的布局调整。"自适应屏幕大小"意味着...
手机浏览器实现拍照功能
最新发布
JQ___的博客
03-08 513
手机浏览器实现拍照功能
HTML5获取监控摄像头
柒柒捌捌。
08-26 8180
转摘自http://blog.csdn.net/journey191/article/details/40744015 HTML5 GetUserMedia Demo var video = docume
VUE项目-H5端人脸识别功能实现
Jack, what else can you do besides holding your little darling?
05-30 6588
1.人脸捕捉技术使用的tracking.js，关键是要理解它的运作原理和一下参数配置。2.因为要调用手机媒体设备，兼容性问题是大问题，特别是苹果手机的问题，往往不知道如何下手，需要有丰富的开发经验和各种曲线救国的开发思想。
前端调用手机摄像头权限进行扫码解析
deft_的博客
04-02 3634
前端调用手机摄像头权限进行扫码解析（demo含Vue及原生）前端调用手机摄像头权限进行扫码解析（demo含Vue及原生js写法）引子实践此时已经可以成功调用摄像头，接下来集成进Vue工程中最后 前端调用手机摄像头权限进行扫码解析（demo含Vue及原生js写法） 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 引子 我本人马上毕业了，现在在新单位实习前端，有个需求需要在移动Web端
H5调用手机摄像头，实时拍照上传（旧）
热门推荐
草巾冒小子的博客
07-05 3万+
H5调用手机摄像头，完成拍照实时上传 项目开发中，偶尔会遇到网页中调用手机摄像头，通过相册选择或直接实时拍照的方式，完成图片上传的功能型需求。 今天，就通过一个小的案例，演示一下完整的实现流程【效果截图省略】。 案例全部代码，示下： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &am
H5调用安卓以及IOS前置摄像头
woshiabc111的博客
08-12 6388
IOS 通过capture='user’属性来调用前置摄像头 capture='camera’调用后置摄像头 苹果手机测试可用安卓不行（Android手机怎么弄都是后置的摄像头。。。。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 使页面适配手机屏幕 --> <meta name="viewport" conten
430个h5小游戏源码demo
09-13
《430个H5小游戏源码Demo》 在当今数字化时代，HTML5（简称H5）技术以其跨平台、轻量级、易交互的特点，成为网页和移动应用开发的重要工具，尤其在小游戏领域，H5游戏源码的广泛应用使得开发者能够快速构建出丰富...
Android与H5之间的调用demo
08-15
Android与H5之间的调用demo
微信H5支付DEMO 绝对可用
01-01
在这个“微信H5支付DEMO”中，包含了一整套完整的支付流程示例，帮助开发者快速理解和集成微信H5支付功能。下面我们将深入探讨相关知识点。 首先，我们来看核心文件`Wxpay.php`，这是微信支付SDK的核心类库，它包含...
海康视频H5player播放简单demo
02-27
这个“海康视频H5player播放简单demo”是针对该库的一个基础示例，旨在帮助开发者快速理解和集成H5player到他们的项目中。 在H5player中，你可以期待以下关键知识点： 1. **HTML5 Video API**：H5player基于HTML5...
html调起苹果手机摄像头_HTML5 调用手机摄像头拍照
weixin_39980002的博客
12-21 800
一、getUserMedia API简介getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia(...
HTML 5调用摄像头并进行拍照
dawuafang
07-01 860
一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。 &lt;!DOCTYPE html&...
uniapp H5人脸识别带前后摄像头
wuxinfuchen的博客
04-25 4254
人脸识别在H5页面进行采集
Web前端之浏览器拍照实现-浏览器原生API实现全像素拍照（不同于论坛大多数的拍照方法）
Three_ST的博客
07-07 1664
浏览器拍照 上面一篇是利用mediaStream获取视频流，通过视频流截图实现拍照功能，但是问题是像素和画质较差，对于有较高要求的场景不能满足，因此继续搜索相关资料 ，这方面的权威肯定是MDN，因此在MDN上搜素能够实现拍照的API，终于在搜素过程中发现了一个实验性功能，只有chromium webkit内核的浏览器才支持该功能。 ImageCapture() constructor 这个就是本次要讨论的功能，这个API能够调用相机实现拍照,也是从mediaStream中获取视屏流，但是这个是为了显示当前传
getUserMedia API及HTML5 调用手机摄像头拍照
weixin_34332905的博客
10-31 1746
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为...
VueJs用H5原生接口getUserMedia调起摄像头拍照
take_relax的博客
07-20 1501
VueJs调用本地摄像头拍照，保存视频使用H5原生接口获取视频流，拍照 使用H5原生接口获取视频流，拍照 在VueJs框架下，利用H5原生接口navigator.mediaDevices.getUserMedia调起摄像头，保存视频和图片 <template></template> <script> export default{ name: 'Snap', data() { width: 640, height: 480, }, method
H5调用摄像头实现视频拍摄及iOS兼容性问题
Jowe940428的博客
06-26 1万+
核心API ：navigator.mediaDevices.getUserMedia&MediaRecorder 场景： 微信公众号H5 实现：Vue+TypeScript 代码： 以下仅为ts部分代码 // 开始录制 startRecord(e: any) { this.isRecording = true this.isBoxShow = false this.rec...
H5调用相机进行拍照及切换摄像头及踩坑记录
C05230的博客
07-15 4741
H5调用相机进行拍照及切换摄像头及ios系统微信内置浏览器踩坑记录
android webview加载h5并能实现拍照 demo
09-04
要实现WebView加载H5并能实现拍照的Demo，首先需要如下步骤： 1. 创建一个新的Android项目，并在布局文件中添加一个WebView控件。 2. 在Activity中获取WebView的引用，并设置WebView的一些常用属性，例如启用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值