基本信息
源码名称：纯浏览器识别其本地图片上的二维码_条形码
源码大小：0.06M
文件格式：.zip
开发语言：js
更新时间：2019-07-17
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

纯浏览器识别其本地图片上的二维码_条形码QR_BR 

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="QR Code scanner">
  <meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript">
  <meta name="language" content="English">
  <meta name="copyright" content="Lazar Laszlo (c) 2011">
  <meta name="Revisit-After" content="1 Days">
  <meta name="robots" content="index, follow">

  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<title>识别二维码</title>

<style type="text/css">
html, body{
  width:100%;
  text-align:center;
  margin: 0;
  padding: 0;
}
img{
  border:0;
}
#main{
  margin: 15px auto;
  background:white;
  overflow: auto;
	width: 100%;
}
#header{
  background:white;
  margin-bottom:15px;
}
#mainbody{
  background: white;
  width:100%;
	display:none;
}
#footer{
  background:white;
}
#v{
  width:290px;
  height:270px;
}
#qr-canvas{
  display:none;
}
#qrfile{
  width:290px;
  height:270px;
  position: relative;
}
#mp1{
  text-align:center;
  font-size:26px;
}
#imghelp input{
  position:absolute;
  left:0;
  top:0;
  bottom: 0;
  width: 100%;
  z-index:100;
  font:18px arial,sans-serif;
  background:#f0f0f0;
	padding-top:10px;
	padding-bottom:10px;
	border-radius:20px;
  opacity: 0;
}
.selector{
  margin:0;
  padding:0;
  cursor:pointer;
  margin-bottom:-5px;
}
#outdiv
{
  width:290px;
  height:270px;
}
#result{
  border: solid;
	border-width: 1px 1px 1px 1px;
  border-color: #ccc;
	width:290px;
  height: 35px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

ul{
  margin-bottom:0;
  margin-right:40px;
}
li{
  display:inline;
  padding-right: 0.5em;
  padding-left: 0.5em;
  font-weight: bold;
  border-right: 1px solid #333333;
}
li a{
  text-decoration: none;
  color: black;
}

#footer a{
	color: black;
}
.tsel{
    padding:0;
}
.hide {
  display: none;
}
#login {
  background: #30c0b1;
  color: white;
  width: 80px;
  height: 35px;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 3px;
  -webkit-appearance: none;
  margin-top: 20px;
}
#uploadText {
  position:absolute;
  left:0;
  top:0;
  bottom: 0;
  width: 100%;
  z-index:99;
  font:18px arial,sans-serif;
  padding-top:10px;
  padding-bottom:10px;
  margin: 0;
  -webkit-appearance: none;
}
#out-canvas {
  margin-top: 40px;
  border: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #30c0b1;
}
</style>

<script type="text/javascript" async="" src="./qr/ga.js"></script>
<script type="text/javascript" src="./qr/llqrcode.js"></script>
<script type="text/javascript" src="./qr/plusone.js" gapi_processed="true"></script>
<script type="text/javascript" src="./qr/webqr.js"></script>
</head>

<body>
  <div id="main">
    <div id="header">
      <p id="mp1">

      </p>
    </div>
    <div id="mainbody" style="display: inline;">
      <table class="tsel" border="0" width="100%">
        <tbody>
          <tr>
            <td valign="top" align="center" width="50%">
              <table class="tsel" border="0">
                <tbody>
                  <tr>
                    <td><img class="selector hide" id="webcamimg" src="./qr/vid.png" onclick="setwebcam()" align="left" style="opacity: 1;"></td>
                    <td>
                      <img class="selector hide" id="qrimg" src="./qr/cam.png" onclick="setimg()" align="right" style="opacity: 0.2;">
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" align="center">
                      <div id="outdiv">
                        <div id="qrfile"><canvas id="out-canvas" width="290" height="220"></canvas>
                        <div id="imghelp">
                          <p id="uploadText">点击选择二维码礼品</p>
                          <input type="file" id="fileBtn" onchange="handleFiles(this.files)"/>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3" align="center">
              <img class="hide" src="./qr/down.png">
            </td>
          </tr>
          <tr>
            <td colspan="3" align="center">
              <div>
                <span>
                	扫描结果:
                </span><input type="text"  id="result">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
<canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
<script type="text/javascript">
  load();
  function login () {
    var hostSn = document.getElementById('result').value;
  };
</script>
</body>
</html>