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

实例介绍

【实例简介】纯浏览器识别其本地图片上的二维码_条形码QR_BR

【实例截图】

from clipboard

【核心代码】

<!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>

标签： 本地图片浏览器条形码二维码浏览

实例下载地址

点此下载实例

不能下载？内容有错？点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

网友评论

我要评论

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见版权及免责申明

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

同类人气实例

实例介绍

实例下载地址