实例介绍
【实例简介】纯浏览器识别其本地图片上的二维码_条形码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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论