用HTML5 可以实现二维码扫描识别的功能吗

发布网友发布时间：2022-04-20 02:39

共4个回答

懂视网时间：2022-04-28 16:52

本文给大家介绍如何用CSS实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

扫描二维码的效果，我原以为不好写呢，后来想了想其实挺简单的，几行代码，走起

<p class="code-bg">
 <p class="line"></p>
</p>

.code-bg{
		 position: relative; 
		 height: 200px; width: 200px; 
		 margin: 0px auto;/*此处为了居中*/
		 background: url(img/ewm1.jpg) center top no-repeat; /*二维码*/
		}
		.line{ 
		 position: absolute; 
		 left: -80px; 
		 z-index: 2; 
		 height: 3px; width: 360px; 
		 background: url(img/share/dapai.png) no-repeat; /*上下扫的线*/
		 /*动画效果*/
		 animation: myScan 1s infinite alternate; 
		 -webkit-animation: myScan 1s infinite alternate; 
		}
		@keyframes myScan{
		 from { top:0px; }
		 to { top: 197px; }
		}
		-webkit-@keyframes myScan{
		 from { top:0px; }
		 to { top: 197px; }
		}

我这里不方便截图，那就这样吧，是不是很简单。

总结：

热心网友时间：2022-04-28 14:00

　　答案是可以。
　　实现基本步骤：
　　操作摄像头，获取图片。
　　技术要点：MediaStream、GetUserMedia、File api。
　　利用canvas使用相关算法分析图片识别图片得出结果。
　　技术要点：getImageData
　　* 涉及到的技术点浏览器们（包括移动端）支持各异，现阶段要开发并投产还不太现实。比如MediaStream的支持情况：http://caniuse.com/#feat=stream

　　* 识别算法是一个难点，不过谢谢github，谢谢开源社区，@Shou Jiesong 的答案中有phonegap的插件地址，支持各种码。

热心网友时间：2022-04-28 15:18

可以的 http://www.hu.com/question/20461523
http://www.uukkuu.com/v305367075702032404/

热心网友时间：2022-04-28 16:52

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
// 从图片中扫描
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function (type,result) {
alert( "Scan success:("+type+")"+result );
}, function (error) {
alert( error.message );
} );
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body >
<input id="scan" type='button' disabled="disabled" onclick='scanImg()' value='扫描图片'></input>
</body>
</html>

首页

文章

用HTML5 可以实现二维码扫描识别的功能吗