纯 html js 扫码，相册扫码非app版本

た入场券 2021-12-03 13:01 276阅读 0赞

由于网上太多无用扫码，今天上传一个寻找很久的扫码，并修改了样式  
tip：手机上测试请用内网穿透，加上安全域名，否则无法调用相机，重点：安全域名 加s  
废话少说上代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title></title>
    
        <style type="text/css">
            body,html{
    			font-size: calc(100vw/7.5);
            }
        
            img,tr,td,html,body,video {
                border: 0;
    			padding: 0;
    			margin: 0;
            }
    
            #main {
    			height: 100%;
                width: 100%;
    			overflow: hidden;
    			display: flex;
    			justify-content: center;
            }
             #outdiv {
                width: 100%;
                height:100%;
    			display: flex;
    			justify-content: center;
            }
            .tsel {
                padding: 0;
    			margin: 0;
    			height: 100%; 
    			width: 100%;
    			
            }
            #v {
                width: 11.7rem;
                height: 100%;
    			border: 0;
    			padding: 0;
    			margin: 0;
    			margin-top: -25px;
            }
    
            #qr-canvas {
                display: none;
            }
            #qrfile {
                width: 320px;
                height: 240px;
            }
           #btnsaveCharge{
    		   position: fixed;
    		   z-index: 10;
    		   top: 0;
    		   right: 0;
    		   width: 60px;
    		   height: 50px;
    		   color: white;
    		   background-color: transparent;
    		   font-size: .35rem;
    	   }
           .leftback{
    		   display: flex;
    		   justify-content: center;
    		   align-items: center;
    		   position: fixed;
    		   z-index: 15;
    		   top: 0;
    		   left: 0;
    		   width: 90px;
    		   height: 45px;
    		   color: white;
    		   font-size: .35rem;
    	   }
            .selector {
                margin: 0;
                padding: 0;
                cursor: pointer;
            }
             .fileinput-button {
                position: relative;
                display: none;
            }
    		.weui-btn{
    			display: block;
    			width: 325px;
    			height: 50px;
    			text-decoration: none;
    			background: green;
    			text-align: center;
    			line-height: 50px;
    			color: white;
    		}
    		.kuang_main{
    			position: fixed;
    			z-index: 9;
    			top: 0;
    			width: 100%;
    			height: 100%;
    			display: flex;
    			
    		}
    		.kuang{
    			width: 4rem;
    			height: 4rem;
    			border: solid green 1px;
    			margin: auto;
    			background-color: rgba(0,0,0,0;
    		}
    
        </style>
    	<script src="js/jQuery.js"></script>
        <script src="js/llrcode.js"></script>
        <script src="js/qrcode.js"></script>
    </head>
    
    <body >
        <div id="main">
            <div id="mainbody">
                <table class="tsel" border="0" width="100%">
                    <tr>
                        <td valign="top" align="center" >
                            <table class="tsel" border="0">
                                <tr>
                                    <td class="videodiv" align="center">
                                        <div id="outdiv">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    	
    	<a class="weui-btn weui-btn_primary" href="javascript:void(0);" onclick="setimg()" id="btnsaveCharge">相册</a>
    	<div class="leftback">< 二维码</div>
    	
    	<div class="kuang_main">
    		<div class="kuang">
    			
    		</div>
    	</div>
        <canvas id="qr-canvas" width="800" height="600"></canvas>
        <script type="text/javascript">
            load();
            setwebcam();
           $(".leftback").click(function(){
                  history.go(-1)
    	   })
        </script>
    </body>
    
    </html>

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5ODM1Mg_size_16_color_FFFFFF_t_70]  
链接：[百度网盘][Link 1]  
提取码：xv8t

小白上路，支持点赞

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5ODM1Mg_size_16_color_FFFFFF_t_70]: /images/20211203/0aa311a0f43c48108cce33359f0639ee.png
[Link 1]: https://pan.baidu.com/s/1HTvMBEM1ERzgMvFWTs-04g